Question

我一直试图使用.slideToggle（）为评论表单设置动画。不幸的是，表单重复了三次（WordPress帖子） - 所以我不得不使用.find（）来定位被点击的特定切换以防止所有表单字段切换。

<script type="text/javascript">
  jQuery(window).load(function(){
    jQuery(".single-comments").toggle()
});
    jQuery(".comment-toggle").click(function() {
      jQuery("this").find(".single-comments").slideToggle('fast');
    });
</script>

上面的脚本并没有导致所有.single-comments div切换，但是当点击任何字段时（显然）切换表单，因为.single-comments（表格div）是.comment-的孩子 - 切换。我改成了：

<script type="text/javascript">
  jQuery(window).load(function(){
    jQuery(".single-comments").toggle()
});
    jQuery(".comment-toggle").click(function() {
      jQuery(".single-comments").find("#respond").slideToggle('fast');
    });
</script>

徒劳地试图规避问题。 #respond是.single中的另一个div - 表单所在的注释。但是，使用第二个代码段，.comment-toggle根本不响应点击次数 - 只是不调用slideToggle。如果有人有任何想法，我会非常感激。谢谢！

Answer 1

您不应将this括在选择器中的引号中。如果将其括在引号中，则将其视为tag name而不是当前事件源对象。如果您有框架4及更高版本，则可以使用ClientIDMode =“static”这将使ClientID保持为服务器端ID。

更改

jQuery("this").find(".single-comments").slideToggle('fast');

到的

jQuery(this).find(".single-comments").slideToggle('fast');

Answer 2

尝试使用jQuery(this).find("#respond").slideToggle('fast')

Answer 3

我已经解决了这个问题。对于那些想知道如何解决问题的人：不要使用.find（）方法，因为这只选择初始jQuery对象中元素的后代。

相反，将toggling元素和元素放在另一个div中，并使用.siblings（）方法，并将特定的选择器作为参数传递给.siblings（）方法。这会导致click事件仅绑定到div的特定实例（在本例中为div.single-comments），而不会影响文档其余部分中的其他相同div。干杯！

jQuery(document).ready(function(){
  jQuery(".comment-toggle").click(function(){
    jQuery(this).siblings(".single-comments").slideToggle('fast');

jQuery：使用.find（）切换表单字段

3 个答案: