Question

所以我试图在博客上创建一个基本的评论系统，但是我最近遇到了一个新问题。我做了一个按钮，切换显示注释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();
  });
});

感谢您的帮助

Answer 1

2个问题

元素的ID必须是uniqe - 使用class
需要切换点击按钮的兄弟评论

$(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>

Answer 2

确保您的ID唯一，或者更好地使用类，并利用上下文this来实现对目标的更改div.comments

＆＃13;

$(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();
    });
});

＆＃13;

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

＆＃13;

Laravel foreach循环使用jquery slidetoggle

2 个答案: