Javascript 到 show/hide <c:forEach> div 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 select 第一个元素。解决方案是使用 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";
 }

Javascript 到 show/hide <c:forEach> div JSTL 元素

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

html

javascript

jstl