Question

我有一个按钮可以切换一个类来隐藏和显示单击按钮时。

我的问题是切换仅适用于一个特定元素。它不适用于多个班级/或ID。我有一个循环浏览博客的@foreach循环，点击后，我需要隐藏div，但所有这些foreach循环都生成相同的ID。

这就是我现在所拥有的：

 <button class="btn btn-primary">Preview</button> <br />


@foreach($blog as $b)
  <div class="col-md-12" class="toggleButtonsFeatured">
    some text here....
  </div>
@endforeach


 <script>
        $( "button" ).click(function() {
            $(".toggleButtonsFeatured").toggleClass(); 
        });
 </script>

如何立即切换所有动态生成的div？

Answer 1

将“id”更改为类并按类切换。 Jquery无法更改具有相同ID的多个元素。您永远不应该在具有相同ID的页面上拥有多个元素。

<button class="btn btn-primary">Preview</button> <br />


@foreach($blog as $b)
  <div class="col-md-12 toggleButtonsFeatured">
    some text here....
  </div>
@endforeach


<script>
    $( "button" ).click(function() {
        $(".toggleButtonsFeatured").toggle(); 
    });
</script>

还可以尝试将jquery代码放入文档就绪函数中。

Answer 2

如果这些是动态生成的，您可能需要先将其包装在静态元素中，然后将click侦听器附加到该元素。

<button class="btn btn-primary">Preview</button> <br />

<div id="wrapper">
@foreach($blog as $b)
  <div class="col-md-12 toggleButtonsFeatured">
    some text here....
  </div>
@endforeach
</div>


<script>
    $("#wrapper").on("click", ".toggleButtonsFeatured", function() {
        $(".toggleButtonsFeatured").toggle(); 
    });
</script>

在foreach循环中切换类

2 个答案: