显示/隐藏在foreach循环中生成的元素

Question

I am looping out forum entries and next to each one i have placed a button to show or hide the reply to comment form, i got this to work using a simple JS script. However because the script is looped out it only works for the top one. presumably because it cannot identify each element using an id because id won't be unique (and class would cause all of them to show/hide). I did think of adding something like {{$comment->id}} to the id so it would be unique but i cannot then use the JS script? can i?

Below is the relevant code:

@extends('layout')

@section('head')
<script>
$(document).ready(function(){
    $("#showhidereply").click(function(){
        $("#replycomment").toggle();
    });
});
</script>
 @stop

@section('content')
    ...
    <!-- Comments -->
          @foreach ($post->comments as $comment)
              <span class="pull-right">
                  <div class=" btn-group">
                    <button class="btn btn">
                        <span class="glyphicon glyphicon-picture"></span> Owner's Name Here
                    </button>
                    <button class="btn btn btn-primary" id="showhidereply">
                      <span class="fa fa-reply"></span>
                    </button>
                  </div>
              </span>
              <p>{{ $comment->body }}</p>
            </div>

    <form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="input-group" style="padding-top: 5px;">
                      <input type="text" name="body" class="form-control"></input>
                      <div class="input-group-btn">
                        <button type="submit" class="btn btn-primary">Reply to Comment</button>
                      </div>
                    </div>
                  </form>
                  </div>
            </div>
            </div>
        </div>
        </div>
          @endforeach
          </div>
</div>
@stop

I did have someone make a suggestion of changing to:

Button

<button class="btn btn btn-primary" class="showhidereply" data-id="{{ $comment->id }}">
    <span class="fa fa-reply"></span>
</button>

Form

<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment-{{ $comment->id }}">

Script

<script>
$(document).ready(function(){
    // change the selector to use a class
    $(".showhidereply").click(function(){
        // this will query for the clicked toggle
        var $toggle = $(this); 

        // build the target form id
        var id = "#replycomment-" + $toggle.data('id'); 

        $( id ).toggle();
    });
});
</script>

But that still doesn't work but the elements are all now unique.

Many Thanks!

Answer 1

Try using this,

<button class="btn btn btn-primary" data-id="{{ $comment->id }}" onclick="showHide('replycomment-{{ $comment->id }}');">
    <span class="fa fa-reply"></span>
</button>

//javascript code
<script>
    function showHide(id){
        $("#"+id).toggle();
    }
</script>