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

Javascript显示/隐藏JSTL的<c：foreach> div元素</c：foreach>

1 个答案: