Laravel foreach 循环与 jquery slidetoggle答案

【问题标题】：Laravel foreach loop with jquery slidetoggleLaravel foreach 循环与 jquery slidetoggle
【发布时间】：2015-02-20 05:29:29
【问题描述】：

所以我正在尝试在博客上创建一个基本的评论系统，其中包含帖子和其他内容，但我最近遇到了一个新问题。我做了一个按钮来切换显示 cmets div。但是第一个按钮会打开所有帖子的所有评论 div。我希望评论按钮分别在每个帖子上打开其评论 div。

这可能很难理解，所以我为它做了一个 jsfiddle：http://jsfiddle.net/bu7z3e46/1/ 我只需要一个帖子上的评论按钮来打开同一个帖子上的评论 div。这是基本的jsfiddle代码： html:

<!-- Laravel Foreach loop here -->
<div class="post">
    Post content here <br>
    <button id="comm">Comments</button>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test
    </div>
</div>
<!-- end foreach loop --> 
    <!-- example of the second post -->
    <div class="post">
    Post content here <br>
    <button id="comm">Comments</button><br>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test1
    </div>
</div>

这里是js：

$(document).ready(function() {
  var par = $('div.comments');
  $(par).hide();

  $('#comm').click(function(e) {
      $(par).slideToggle('slow');
      e.preventDefault();
  });
});

感谢您的帮助

【问题讨论】：

标签： javascript jquery html laravel laravel-4

【解决方案1】：

保持您的 ID 唯一，或者最好仍然使用一个类，并利用上下文 this 来影响目标 div.comments 的更改

$(document).ready(function() {
    var par = $('div.comments');
    par.slideToggle('fast');
    $('.comm').click(function(e) {
        par.filter(':visible')
        .add( $(this).closest('.post').find('div.comments') ).slideToggle('slow');
        e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Laravel Foreach loop here -->
<div class="post">
    Post content here <br>
    <button class="comm">Comments</button>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test
    </div>
</div>
<!-- end foreach loop --> 
    <!-- example of the second post -->
    <div class="post">
    Post content here <br>
    <button class="comm">Comments</button><br>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test1
    </div>
</div>

【讨论】：

【解决方案2】：

2 个问题

元素的 ID 必须是唯一的 - 使用类
需要切换单击按钮的同级注释

$(document).ready(function() {
  var $par = $('div.comments');
  $par.hide();

  //use comm as a class value since you want to group multiple elements
  $('.comm').click(function(e) {
    var $comm = $(this).siblings('.comments').slideToggle('slow');
    //if you want to hide previously opened comment when a new one is clicked
    $par.not($comm).slideUp('slow');
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Laravel Foreach loop here -->
<div class="post">
  Post content here
  <br>
  <button class="comm">Comments</button>
  <div class="comments">
    <!-- Foreach loop for comments -->
    Test
  </div>
</div>
<!-- end foreach loop -->
<!-- example of the second post -->
<div class="post">
  Post content here
  <br>
  <button class="comm">Comments</button>
  <br>
  <div class="comments">
    <!-- Foreach loop for comments -->
    Test1
  </div>
</div>

【讨论】：