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>