如何从laravel刀片循环中获取jQuery的变量类名

Question

I want to Show/Hide replies for each comment. In order to do that, my jQuery selector has to be variable class name (so that I can show/hide replies of a specific comment without affecting replies of other comments). I've written the PHP code appending comment_id with the class to make the classes different. But I get these IDs from Laravel blade loop and I do not know how to do the same in jQuery. Here's my 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            

And this is jQuery:

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

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

I've manually put a '1' there and it shows/hides the replies of the first comment. I need to do it for all the comments. It shouldn't be difficult but I'm still learning jQuery. I hope someone can help me with it.

Answer 1

Try this :

@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>