Javascript jQuery函数仅在单击的元素上运行

Javascript jQuery函数仅在单击的元素上运行,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在一些内容上实现一个手风琴风格的方框。然而,在一个模板上有4-6个这样的框,出于明显的原因,它们都具有不同的类。然而,我想尝试使代码尽可能容易阅读,我不想为每个类名重复代码。我假设jQuerys(这个)方法会起作用,但我不能100%确定如何使用它 以下是我的JS代码: <script type="text/javascript"> $(document).ready(function(){ $(".block-50_hoverHeader

我试图在一些内容上实现一个手风琴风格的方框。然而,在一个模板上有4-6个这样的框,出于明显的原因,它们都具有不同的类。然而,我想尝试使代码尽可能容易阅读,我不想为每个类名重复代码。我假设jQuerys(这个)方法会起作用,但我不能100%确定如何使用它

以下是我的JS代码:

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

        });

        });


</script>

$(文档).ready(函数(){
$(“.block-50_hoverHeader”)。单击(函数(){
//警报(“点击”);
$(“.scrollText”).slideToggle(1000);
});
});
因此.scrollText类是一个div,它保存了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>

(图像用作背景图像)
这是头球

这是需要在完成后显示的内容
查找相对于单击的
block-50\u hoverHeader
元素的
滚动文本。在本例中,它是下一个兄弟,因此您可以使用.next()

在事件处理程序中,this
指向处理程序注册的元素,在本例中,它是
block-50\u hoverHeader
元素,因此我们可以使用
$(this.next()
查找下一个
滚动文本


演示:

查找相对于单击的
block-50\u hoverHeader
元素的
滚动文本。在本例中,它是下一个兄弟,因此您可以使用.next()

在事件处理程序中,this
指向处理程序注册的元素,在本例中,它是
block-50\u hoverHeader
元素,因此我们可以使用
$(this.next()
查找下一个
滚动文本


演示:

有很多方法可以实现这一点。我更喜欢抓取共享的父对象,然后使用
find
,因为我发现由于对html结构的微小修改,这不太可能被破坏

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

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

});

有许多方法可以实现这一点。我更喜欢抓取共享的父对象,然后使用
find
,因为我发现由于对html结构的微小修改,这不太可能被破坏

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

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

});

为什么不针对整个部门

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

为什么不针对整个部门

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

非常感谢。真的帮了大忙!:)非常感谢。真的帮了大忙!:)