顯示/隱藏的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選擇第一個元素。 解決方案是使用Class而不是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";
 }