在 foreach 循环内切换类

Question

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

我的问题是切换仅适用于一个特定元素。它不适用于多个 classes / 或 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" 更改为 class 并按 class 切换。 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

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

<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 循环内切换类

Toggle classes inside a foreach loop

javascript

jquery

loops

toggle

在 foreach 循环内切换 类

Toggle classes inside a foreach loop

javascript

jquery

loops

toggle

在 foreach 循环内切换类