如何在同一页面中设置多个“多读少读”按钮

M J*_*ers 2 html javascript css arrays

我在这里做错了什么?我将每一个都放入一个单独的 ID 中,但它仍然无法在我的代码上运行。请帮忙处理几天后到期的作业!

\n\n

\r\n
\r\n
function readMoreRome() { //finds function\r\n    var dots = document.getElementById("dots"); //returns element that has the ID attribute with value, searches for dots\r\n    var moreText = document.getElementById("more"); // \'\' \'\' searches for more\r\n    var btnText = document.getElementById("myBtn"); // \'\' \'\' searches for myBtn\r\n\r\n    if (dots.style.display === "none") {\r\n        dots.style.display = "inline";\r\n        btnText.innerHTML = "Read more"; //button says read more to show more text\r\n        moreText.style.display = "none";\r\n    } else {\r\n        dots.style.display = "none";\r\n        btnText.innerHTML = "Read less"; //button says read less to show less text\r\n        moreText.style.display = "inline";\r\n    }\r\n}\r\n\r\nfunction readMoreBuda() { //finds function\r\n    var dots = document.getElementById("dots2"); //returns element that has the ID attribute with value\r\n    var moreText = document.getElementById("more2"); // \'\' \'\' searches for more2\r\n    var btnText = document.getElementById("myBtn2"); // \'\' \'\' searches for myBtn2\r\n\r\n    if (dots.style.display === "none") {\r\n        dots.style.display = "inline";\r\n        btnText.innerHTML = "Read more"; //button says read more to show more text\r\n        moreText.style.display = "none";\r\n    } else {\r\n        dots.style.display = "none";\r\n        btnText.innerHTML = "Read less"; //button says read less to show less text\r\n        moreText.style.display = "inline";\r\n    }\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="card">\r\n    <h2>Visit Budapest</h2>\r\n    <div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>\r\n    <div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>\r\n    <p><i>Sz\xc3\xa9chenyi Thermal Baths </i></p>\r\n    <p>\r\n        Budapest is the capital city of Hungary. It is best known for its arts and culture. It is a relatively small city, however there are much to see and do.\r\n        <span id="dots2">...</span>\r\n        <span id="more2">Situated on thermal springs, there are many naturally heated baths to relax in, the Sz\xc3\xa9chenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman\xe2\x80\x99s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst\xc2\xa0famous\xc2\xa0European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>\r\n    </p>\r\n    <button onclick="readMoreBuda()" id="myBtn2">Read more</button>\r\n</div>\r\n<br>\r\n<div class="card">\r\n    <h2>Visit Barcelona</h2>\r\n    <div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>\r\n    <div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>\r\n    <p><i>Park G\xc3\xbcell </i></p>\r\n    <p>\r\n        Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,\r\n        <span id="dots3">...</span>\r\n        <span id="more3"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park G\xc3\xbcell which was firstly designed for a town up in the mountains by artist Antoni Gaud\xc3\xad. Gaud\xc3\xad\'s work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Fam\xc3\xadlia, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>\r\n    </p>\r\n    <button onclick="readMoreBarca()" id="myBtn3">Read more</button>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

第一次可以用,但第二次按钮就不起作用了?我改了ID,还是不行。它可以工作,但是它指出首先将所有文本都向外阅读,您必须多次单击它才能重新连接并工作。

\n

Mau*_*rez 6

好吧,你没有定义readMoreBarca()......你定义了readMoreRome(),但这从未被使用过。

\n\n

你有代码重复,这是一个不好的做法,你应该有一个像这样的参数化函数:

\n\n

\r\n
\r\n
function readMore(city) {\r\n    let dots = document.querySelector(`.card[data-city="${city}"] .dots`);\r\n    let moreText = document.querySelector(`.card[data-city="${city}"] .more`); \r\n    let btnText = document.querySelector(`.card[data-city="${city}"] .myBtn`);\r\n\r\n    if (dots.style.display === "none") {\r\n        dots.style.display = "inline";\r\n        btnText.textContent = "Read more";\r\n        moreText.style.display = "none";\r\n    } else {\r\n        dots.style.display = "none";\r\n        btnText.textContent = "Read less"; \r\n        moreText.style.display = "inline";\r\n    }\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="card" data-city="buda">\r\n    <h2>Visit Budapest</h2>\r\n    <div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>\r\n    <div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>\r\n    <p><i>Sz\xc3\xa9chenyi Thermal Baths </i></p>\r\n    <p>\r\n        Budapest is the capital city of Hungary. It is best known for its arts and culture. It is a relatively small city, however there are much to see and do.\r\n        <span class="dots">...</span>\r\n        <span class="more" style="display: none;">Situated on thermal springs, there are many naturally heated baths to relax in, the Sz\xc3\xa9chenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman\xe2\x80\x99s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst\xc2\xa0famous\xc2\xa0European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>\r\n    </p>\r\n    <button onclick="readMore(\'buda\')" class="myBtn">Read more</button>\r\n</div>\r\n<br>\r\n<div class="card" data-city="barca">\r\n    <h2>Visit Barcelona</h2>\r\n    <div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>\r\n    <div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>\r\n    <p><i>Park G\xc3\xbcell </i></p>\r\n    <p>\r\n        Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,\r\n        <span class="dots">...</span>\r\n        <span class="more" style="display: none;"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park G\xc3\xbcell which was firstly designed for a town up in the mountains by artist Antoni Gaud\xc3\xad. Gaud\xc3\xad\'s work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Fam\xc3\xadlia, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>\r\n    </p>\r\n    <button onclick="readMore(\'barca\')" class="myBtn">Read more</button>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n