jQuery函数只能在点击的元素上运行

我试图在一些内容上实现一个手风琴风格的框。但是在1个模板上有4-6个这样的盒子，所有这些盒子都有明显的原因。不过，我想尝试使代码尽可能容易阅读，并且我不想为每个类名重复代码。我很喜欢jQuerys（这个）方法可以工作，但我不是100％确定如何使用它。jQuery函数只能在点击的元素上运行

这里是我的JS代码：

 <script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".block-50_hoverHeader").click(function(){ 
      //alert("clicked"); 
      $(".scrollText").slideToggle(1000); 

     }); 

     }); 


</script>

所以.scrollText类是包含所有需要被显示的onClick功能后的内容股利。但目前当我点击标题时，所有.scollText div都出现在页面上。所以我希望它只出现在被点击的父头div上。

这里的HTML：

<div class="block-50 left textHoverWrapOne"> 
    <img src="" alt="" /> (Image working as BG Image) 
    <div class="block-50_hoverHeader"><p>This is a header!</p></div> 
    <div class="block-50_textHoverOne trans_click scrollText"> 
     This is the content that needs to be displayed after the 
    </div> 
</div>

来源

2013-08-28 JDavies

找到scrollText相对于点击block-50_hoverHeader元素。在这种情况下，它的下一个兄弟，所以你可以使用的.next（）

在事件处理器this点，其中处理程序注册，在这种情况下它是block-50_hoverHeader元素的元素，所以我们可以找到接下来scrollText使用$(this).next()

jQuery(function ($) { 
    $(".block-50_hoverHeader").click(function() { 
     $(this).next().slideToggle(1000); 
    }); 
});

演示：Fiddle

来源

2013-08-28 15:19:50

谢谢！真的帮了很多！ :) – JDavies

有许多的方法来做到这一点。我更喜欢抓住共享的父级，然后使用find，因为我发现由于对html结构进行微小的修改，这种情况有点不太可能中断。

$(".block-50_hoverHeader").click(function(){ 

    $(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000); 

});

来源

2013-08-28 15:23:22

为什么不瞄准整个div？

jQuery(function ($) { 
    $(".block-50").click(function() { 
     $(this).find('.scrollText').slideToggle(1000); 
    }); 
});

来源

2013-08-28 15:24:01 Romaindr

jQuery函数只能在点击的元素上运行

回答

相关问题