我正在开发一个博客,其中包含通过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
类的按钮会隐藏或显示所有文章的所有评论表单。
答案 0 :(得分:2)
如果您总是有一个.mybutton
按钮,后面跟着要隐藏的.mycomment
div,那么您需要做的就是找到被推按钮的下一个兄弟.mycomment
像这样:
$("div").on("click", ".mybutton", function(e){
$(this).next(".mycomment").slideToggle("slow");
e.stopPropagation();
});
请注意使用next()
方法查找下一个.mycomment
元素,该元素是所点击的.mybutton
的兄弟元素。