如何將相同的 function 應用於多個元素？

Question

我一直在嘗試將單個 js function 應用於我網頁上的按鈕。 每當我單擊第一個按鈕時，function 都會按預期運行，但是，當我單擊第二個或第三個按鈕時，function 會在第一個按鈕上運行，而不是按預期在其他兩個按鈕上運行。 請幫忙？？

 function buttonOp() { var dots = document.getElementById('dots'); var moreBtn= document.getElementsByClassName('moreButton'); var moretext= document.getElementById('more'); if(dots.style.display == 'none'){ dots.style.display = 'inline'; moreBtn.innerHTML = 'read more'; moretext.style.display = 'none'; }else { dots.style.display = 'none'; moreBtn.innerHTML = 'show less'; moretext.style.display = 'block'; } };

 <div> <p>Title: The Autobiography of Malcolm x <span id="dots">...</span> </p> <span id="more"> <p>Author: Malcom x, Alex Haley</p> <p>Published: October 29, 1965</p> <p>Genres: Biography, Autobiography</p> </span> <button onclick="buttonOp()" class="moreButton">read more</button> <p><img alt="cover" src="https://images-na.ssl-images-amazon.com/images/I/81kQBRCqt-L.jpg"></p> </div> <div> <p>Title: I Know Why The Caged Bird Sings <span id="dots">...</span></p> <span id="more"> <p>Author: Maya Angelou</p> <p>Published: 1969</p> <p>Genres: Biography, Autobiography</p> </span> <button onclick="buttonOp()" class="moreButton">read more</button> <p><img alt="cover" src='https://images-na.ssl-images-amazon.com/images/I/71IrTqSVOjL.jpg'></p> </div> <div> <p>Title: The Worlds Fastest Man: The Extraordinary Life of Cyclist Major Taylor, Americas First Black Sports Hero <span id="dots">...</span></p> <span id="more"> <p>Author: Michael Kranish</p> <p>Published: May 7, 2019</p> <p>Genres: Biography</p> </span> <button onclick="buttonOp()" class="moreButton">read more</button> <p><img alt="cover" src="https://images-na.ssl-images-amazon.com/images/I/81V1whsTaYL.jpg"></p> </div> </div>

Answer 1

您的按鈕點擊正在處理每個按鈕。 這里的問題是，在 HTML 中，一個“id”只能與一個元素一起使用，但您有 3 個元素具有相同的 id。

這是解決您的問題的一種簡單（但不方便？）的方法。

<div>
            <p>Title: The Autobiography of Malcolm x <span id="dots1">...</span> </p>
            <span id="more1">
              <p>Author: Malcom x, Alex Haley</p>
              <p>Published: October 29, 1965</p>
              <p>Genres: Biography, Autobiography</p>
            </span>
            <button onclick="buttonOp(1)" class="moreButton1">read more</button>
            <p><img alt="cover" src="https://images-na.ssl-images-amazon.com/images/I/81kQBRCqt-L.jpg"></p>
          </div>

          <div>
            <p>Title: I Know Why The Caged Bird Sings <span id="dots2">...</span></p>
            <span id="more2">
              <p>Author: Maya Angelou</p>
              <p>Published: 1969</p>
              <p>Genres: Biography, Autobiography</p>
            </span>
            <button onclick="buttonOp(2)" class="moreButton2">read more</button>
            <p><img alt="cover" src='https://images-na.ssl-images-amazon.com/images/I/71IrTqSVOjL.jpg'></p>
          </div>

          <div>
            <p>Title: The Worlds Fastest Man: The Extraordinary Life of Cyclist Major Taylor, Americas First Black Sports Hero <span id="dots3">...</span></p>
            <span id="more3">
              <p>Author: Michael Kranish</p>
              <p>Published: May 7, 2019</p>
              <p>Genres: Biography</p>
            </span>
            <button onclick="buttonOp(3)" class="moreButton3">read more</button>
            <p><img alt="cover" src="https://images-na.ssl-images-amazon.com/images/I/81V1whsTaYL.jpg"></p>
          </div>

        </div>

function buttonOp(id) {
  console.log("Clicked"+id)
  var dots = document.getElementById('dots'+id);
  var moreBtn= document.getElementsByClassName('moreButton'+id);
  var moretext= document.getElementById('more'+id);

  if(dots.style.display == 'none'){
    dots.style.display = 'inline';
    moreBtn.innerHTML = 'read more';
    moretext.style.display = 'none';
  }else {
    dots.style.display = 'none';
    moreBtn.innerHTML = 'show less';
    moretext.style.display = 'block';
  }
};