javascript - 如何在同一个页面中制作多个阅读更多阅读更少按钮

Question

我在这里做错了什么？我将每个都放入一个单独的 ID，但它仍然无法处理我的代码。请帮助它完成几天后到期的作业!

function readMoreRome() { //finds function
    var dots = document.getElementById("dots"); //returns element that has the ID attribute with value, searches for dots
    var moreText = document.getElementById("more"); // '' '' searches for more
    var btnText = document.getElementById("myBtn"); // '' '' searches for myBtn

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Read more"; //button says read more to show more text
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less"; //button says read less to show less text
        moreText.style.display = "inline";
    }
}

function readMoreBuda() { //finds function
    var dots = document.getElementById("dots2"); //returns element that has the ID attribute with value
    var moreText = document.getElementById("more2"); // '' '' searches for more2
    var btnText = document.getElementById("myBtn2"); // '' '' searches for myBtn2

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Read more"; //button says read more to show more text
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less"; //button says read less to show less text
        moreText.style.display = "inline";
    }
}

<div class="card">
    <h2>Visit Budapest</h2>
    <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>
    <div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
    <p><i>Széchenyi Thermal Baths </i></p>
    <p>
        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.
        <span id="dots2">...</span>
        <span id="more2">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi 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’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
    </p>
    <button onclick="readMoreBuda()" id="myBtn2">Read more</button>
</div>
<br>
<div class="card">
    <h2>Visit Barcelona</h2>
    <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>
    <div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
    <p><i>Park Güell </i></p>
    <p>
        Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
        <span id="dots3">...</span>
        <span id="more3"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí'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ília, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
    </p>
    <button onclick="readMoreBarca()" id="myBtn3">Read more</button>
</div>

它第一次有效，但是第二次按钮不起作用？我更改了 ID，但它仍然无法正常工作。它可以工作，但是它会首先向外声明所有文本的阅读更多内容，您必须多次单击它才能重新连接和工作。

Answer 1

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

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

function readMore(city) {
    let dots = document.querySelector(`.card[data-city="${city}"] .dots`);
    let moreText = document.querySelector(`.card[data-city="${city}"] .more`); 
    let btnText = document.querySelector(`.card[data-city="${city}"] .myBtn`);

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.textContent = "Read more";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.textContent = "Read less"; 
        moreText.style.display = "inline";
    }
}

<div class="card" data-city="buda">
    <h2>Visit Budapest</h2>
    <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>
    <div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
    <p><i>Széchenyi Thermal Baths </i></p>
    <p>
        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.
        <span class="dots">...</span>
        <span class="more" style="display: none;">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi 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’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
    </p>
    <button onclick="readMore('buda')" class="myBtn">Read more</button>
</div>
<br>
<div class="card" data-city="barca">
    <h2>Visit Barcelona</h2>
    <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>
    <div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
    <p><i>Park Güell </i></p>
    <p>
        Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
        <span class="dots">...</span>
        <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üell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí'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ília, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
    </p>
    <button onclick="readMore('barca')" class="myBtn">Read more</button>
</div>