jQuery切换评论框

Question

我在使用jQuery显示和隐藏我的评论时遇到了困难。我正在构建一个Rails应用程序。下面是我的html.erb，下面是我的jQuery。到目前为止，它表现为连锁效应，即如果我点击最顶端帖子的按钮（.myButton），就会打开其下面所有帖子的评论。但是，如果我点击最底部帖子的按钮，则只会打开该帖子的评论框。任何有识之士将不胜感激。我试图查询该堆栈溢出的问题，但它并没有帮助我Comments toggle button open multiple comments

HTML：

<input type="button" class="myButton">name</input> 
... 

<div class="myDiv" > 
    <% if post.comments %> 
     <% post.comments.each do |comment| %> 
     <div class="comment"> 
      <div class="comment_name"> 
      <%= comment.name %> 
      </div> 
      <div class="comment_content"> 
      <%= comment.content %> 
      </div> 
      <% if comment.user == current_user %> 
      <%= link_to post_comment_path(post, comment), method: :delete, data: { confirm: "Are you sure?" } %> 
      <% end %> 
     </div> 
     <% end %> 
    <% end %> 

    <div class="comment_form"> 
     <%= form_for [post, post.comments.new] do |f| %> 
     <%= f.text_field :content, placeholder: 'Add a comment...' %> 
     <% end %> 
    </div> 
    </div> 

    <% end %> 

</div> 

的jQuery：

jQuery(document).ready(function(){ 
    $('.myButton').on('click', function(event) {   
     $(this).nextAll('.myDiv').toggle('swing'); 
    }); 
}); 

Answer 1

您应该使用next而不是像nextAll以下。希望这可以帮助。

$('.myButton').on('click', function (event) { 
 
    $(this).next('.myDiv').toggle('swing'); 
 
});

.myDiv { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br /><input type="button" class="myButton" value="name" /> 
 
<div class="myDiv"> 
 
    <div class="comment"> 
 
     <div class="comment_name"> 
 
      Name 1 
 
     </div> 
 
     <div class="comment_content"> 
 
      Comment 1 
 
     </div> 
 
    </div> 
 
    <div class="comment_form"> 
 
     <textarea placeholder="Add a comment....."></textarea> 
 
    </div> 
 
</div> 
 

 
<br /><input type="button" class="myButton" value="name" /> 
 
<div class="myDiv"> 
 
    <div class="comment"> 
 
     <div class="comment_name"> 
 
      Name 2 
 
     </div> 
 
     <div class="comment_content"> 
 
      Comment 2 
 
     </div> 
 
    </div> 
 
    <div class="comment_form"> 
 
     <textarea placeholder="Add a comment....."></textarea> 
 
    </div> 
 
</div> 
 

 
<br /><input type="button" class="myButton" value="name"/> 
 
<div class="myDiv"> 
 
    <div class="comment"> 
 
     <div class="comment_name"> 
 
      Name 3 
 
     </div> 
 
     <div class="comment_content"> 
 
      Comment 3 
 
     </div> 
 
    </div> 
 
    <div class="comment_form"> 
 
     <textarea placeholder="Add a comment....."></textarea> 
 
    </div> 
 
</div>