laravelブレードループからjQueryの変数クラス名を取得する方法

Question

コメントごとに返信を表示/非表示にしたい。これを行うために、私のjQueryセレクタは変数クラス名でなければなりません（他のコメントの返信に影響を与えずに特定のコメントの返信を表示/非表示にすることができます）。私はクラスを別のものにするためにクラスにcomment_idを追加するPHPコードを書いています。しかし、私はLaravelのブレードループからこれらのIDを取得し、jQueryで同じことを行う方法はわかりません。ここに私のblade.phpだ -

@foreach($comments as $comment) 
    <div class="box-comment"> 
    <div class="comment-text"> 
     {{$comment->body}}<br /> 
     <button class="btn btn-link text-muted toggle-replies-{{$comment->id}}">Show/Hide Replies</button> 
    </div> <!-- /.comment-text --> 
    </div> <!-- /.box-comment --> 
    <div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;"> 
    <input type="text" placeholder="Write a reply..."> 
    </div> 
    @foreach($comment->replies as $reply) 
    @if($comment->id == $reply->comment_id) 
     <div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;"> 
     <div class="comment-text"> 
      {{$reply->body}} 
     </div> <!-- /.comment-text --> 
     </div> <!-- /.box-comment --> 
    @endif 
    @endforeach      
@endforeach    

そして、これはjQueryのです：

<script> 
$(document).ready(function() { 
    $(".toggle-comments").click(function(){ 
    $(".comment-box").slideToggle(); 
    }); 

    $(".toggle-replies-1").click(function(){ 
    $(".reply-box-1").slideToggle(); 
    }); 
}); 
</script> 

私は手動であり、「1」を入れたのだが、/が最初のコメントの返信を隠し示しています。私はすべてのコメントのためにそれを行う必要があります。それは困難ではありませんが、私はまだjQueryを学んでいます。誰かが私を助けてくれることを願っています。

Answer 1

はこれを試してみてください：

@foreach($comments as $comment) 
    <div class="box-comment"> 
     <div class="comment-text"> 
      {{$comment->body}}<br /> 
      <button class="btn btn-link text-muted show_hide_replies" id="{{$comment->id}}">Show Replies</button> 
     </div> 
    </div> 
    <div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;"> 
     <input type="text" placeholder="Write a reply..."> 
    </div> 
    @foreach($comment->replies as $reply) 
     @if($comment->id == $reply->comment_id) 
      <div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;"> 
       <div class="comment-text"> 
        {{$reply->body}} 
       </div> 
      </div> 
     @endif 
    @endforeach      
@endforeach    

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".toggle-comments").click(function(){ 
     $(".comment-box").slideToggle(); 
    }); 

    $(".show_hide_replies").click(function(ev) { 
     var getElem = $(this).attr("id"); 
     $(".reply-box-"+getElem).slideToggle() 
     $(this).text(function(i, text){ 
      return text === "Show Replies" ? "Hide Replies" : "Show Replies"; 
     }) 
    }) 
}); 
</script>