Javascript在循環中切換隱藏和顯示按鈕Laravel 5

Question

我正在用下面的注釋部分代碼編寫Laravel 5項目

@foreach($Comment as $Comment)
  <div id="comment-{!! $Comment->comments_id !!}" class="comment-wrapper">

     <div class="btn btn-lg btn-info btn-xs" class="show">Show</div>
  <div class="btn btn-lg btn-success btn-xs" class="hide">Hide</div>
  <div class="btn btn-lg btn-warning btn-xs" class="toggle">Toggle</div>

      <div class="watch" class="jumbotron alert-info">



         <ul class="list-group">
           <li class="list-group-item list-group-item-success">{!! $Comment->author  !!}</li>
           <li class="list-group-item"> {!! $Comment->text !!}</li>
           </ul>
             @if ($Comment->author == Auth::user()->name)
               <p><a href="{!! URL::route('deleteComment', $Comment->comments_id) !!}"  class=" btn-danger btn-xs" style="float:right">Delete</a></p>  



              @endif

        <h6><small>CREATED ON: {!! $Comment->created_at !!}</small></h6>
</div>
</div>
          @endforeach

我有一個看起來像這樣的javascript文件

 $(document).ready(function () {

 $('.show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});
 $('.hide').click(function () {
    $(this).closest('.comment-parent').find('.watch').hide('slow');
});
 $('.toggle').click(function () {
    $(this).closest('.comment-parent').find('.watch').toggle('slow');
});

});

麻煩的是，切換/隱藏javascript函數僅適用於一組按鈕，並且隱藏了所有注釋。 我希望有一組按鈕可以分別處理每個評論。 我試圖通過添加1並為每個注釋增加它來增加watch類和按鈕div id，但無法使其正常工作。 任何幫助，將不勝感激謝謝。

Answer 1

您可以嘗試如下操作：

$('#show').click(function () {
    $(this).next('.watch').show('slow');
});

對於其他方法，請嘗試相同的方法，因此僅作用於watch類的下一個第一個div ，而且，除了class以外，您還可以使用唯一的id屬性將每個集合包裝在單個父容器中，以便進行更好的分組。 例如：

@foreach($Comment as $Comment)
    <div id="comment-{{$comment->id}}" class="comment-wrapper">
        <div class="btn btn-lg btn-info btn-xs show">Show</div>
        <!-- More... -->
        <div class="watch" class="jumbotron alert-info">
            <!-- More... -->
        </div>
    </div>
@endforeach

這樣，您可以更具體地完成jQuery選擇，例如：

$('#show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});

更新 （感謝haakym向我指出）：而且，一個id必須是唯一的，因此不要使用id='show'將其用作類，然后使用：

$('.show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});