Javascript顯示/隱藏<c:forEach> JSTL的div元素

Question

我對每個標記都有一個JSTL，如下所示。

<c:forEach items="${schedule}" var="period"> 
       <td> 
        <div id="friends">  
        ${period.getFriends()} 
       </div> 
       </td> 
    </c:forEach> 

我想實現一個按鈕，點擊後會隱藏或顯示所有這些塊。到目前爲止，所有按鈕都隱藏或顯示塊的第一個元素。我不知道它爲什麼不遍歷所有的塊。

<button onclick="myFunction()" class="btn btn-success btn-xs">With friend</button> 
         <button class="btn btn-danger btn-xs">Without friend</button> 
         <script> 
          function myFunction() { 
           var div = document.getElementById('friends'); 
           div.innerHTML = "AFJASFAS"; 
          } 
         </script> 

正如你所看到的，我並沒有真正實現顯示和隱藏按鈕。我只是通過添加額外的文本來測試它，但是，這個文本只被添加到第一個div中。我如何使它適用於所有元素？

Answer 1

這很明顯，因爲你使用一個ID爲所有塊！ ID在html頁面中必須是唯一的，但是您有許多<div id="friends">。當你有一些具有相同ID的元素時，javascript選擇第一個元素。解決方法是使用類而不是ID：

<c:forEach items="${schedule}" var="period"> 
      <td> 
       <div class="friends">  
       ${period.getFriends()} 
      </div> 
      </td> 
</c:forEach> 

function myFunction() { 
     var div = document.getElementsByClassName("friends"); 
     div.innerHTML = "AFJASFAS"; 
}