1

我正在开发一个博客，其中包含通过 ajax 请求加载的动态内容，并且我正在尝试使用按钮隐藏/显示文章的“发表评论”表单：

<div id="post">
...
  <ol id="update" class="timeline">
    <!-- comments here -->
  </ol>
  <button class="mybutton Bhome">Commenta</button><!-- hide/show button -->
  <div class="mycomment"><!-- div to hide/show -->
    <form action="#" method="post">
      Nome:
      <input type="text" size="12" id="name" /><br />
      Email:
      <input type="text" size="12" id="email" /><br />
      <textarea rows="10" cols="50" class="mytext" id="commentArea"></textarea><br />
      <input type="submit" class="Bhome" value=" Post " />
    </form>
  </div><!-- mycomment --> 
</div><!-- post -->

此 jquery 代码运行良好，但对所有帖子都有影响...

$("div").on("click", ".mybutton", function(e){ 
  $(".mycomment").slideToggle("slow");
  e.stopPropagation();
});

我希望只有单击的隐藏/显示按钮对相关文章有影响，但我的页面上有不止一篇文章，带有.mybutton类的按钮隐藏或显示所有文章的所有评论表单。

4

1 回答 1

2

如果您总是有一个.mybutton按钮后跟.mycomment要隐藏的 div，那么您需要做的就是找到.mycomment被按下的按钮的下一个兄弟，如下所示：

$("div").on("click", ".mybutton", function(e){ 
    $(this).next(".mycomment").slideToggle("slow");
    e.stopPropagation();
});

请注意使用next()方法来查找.mycomment与 clicked 同级的下一个元素.mybutton。

于 2012-10-17T23:00:06.353 回答