Javascript to show/hide <c：forEach> div element of JSTL

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";
 }