foreach 루프 내에서 클래스 토글

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"를 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>