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来增加监视类和按钮div id，并为每个注释增加它但无法使其工作。任何帮助将不胜感激。

Answer 1

您可以尝试这样的事情：

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

对其他方法尝试相同的方法，因此只有下一个div类watch才会被操作，而且，您可以使用唯一的{{将每个集合包装在单个父容器中除了id之外，还有1}}属性，以便更好地进行分组。例如：

class

这样，您可以更具体地完成@foreach($Comment as $Comment) <div id="comment-{{$comment->id}}" class="comment-wrapper"> <div class="btn btn-lg btn-info btn-xs show">Show</div>  <div class="watch" class="jumbotron alert-info">  </div> </div> @endforeach选择，例如：

jQuery

更新（感谢haakym指示我）：此外，$('#show').click(function () { $(this).closest('.comment-parent').find('.watch').show('slow'); });必须是唯一的，因此不要使用id将其用作课程然后使用：

id='show'

Javascript切换隐藏和显示循环Laravel 5中的按钮

1 个答案: