Question

我正在尝试将这些功能合并为一个。

            $(".a h3").click(function() {
               $(".a .collapse-this").slideToggle("slow");
            });

            $(".b h3").click(function() {
               $(".b .collapse-this").slideToggle("slow");
            });

            $(".c h3").click(function() {
               $(".c .collapse-this").slideToggle("slow");
            });

这样的东西，但这会导致一切崩溃，希望一次打开一个。

           $(".repeatingClass h3").click(function() {
              $(".collapse-this").slideToggle("slow");
           });

我已经搜索了一个解决方案并且遇到了“$（this）”，但我有点陷入困境。希望有人可以提供帮助。

Answer 1

很难说不知道你的标记，但你应该为你的.a，.b等元素提供一个共同的课程。然后你可以使用：

$(".repeatingClass h3").click(function() {
     $(".collapse-this", $(this).closest('.repeatingClass')).slideToggle("slow");
});

.closest()会找到与选择器匹配的第一个父（.repeatingClass），然后我将其用作.collapse-this查找的context。这意味着它只会在给定的上下文中搜索，并且它等同于$(this).closest('.repeatingClass').find('.collapse-this')。

jsFiddle Demo to see I'm not lying ;)

Answer 2

$(".a, .b, .c")
.addClass('repeatingClass')
.find('h3')
.click(function() {
   $(this).parents('.repeatingClass').find('.collapse-this').slideToggle("slow");
});

Answer 3

我会抓住它：

$(".repeatingClass h3").click(function(e){
    $(this).closest(".repeatingClass").find('.collapse-this').slideToggle("slow");
});

closest调用找到满足选择器的元素的最近父元素，在本例中为.repeatingClass

Answer 4

我喜欢使用data- attributes来存储对页面上其他HTML的引用。所以我将HTML设置为：

<h3 data-panel-id="panel1">blah blah</h3>
<h3 data-panel-id="panel2">blah blah</h3>
<h3 data-panel-id="panel3">blah blah</h3>

然后你可以把它写成你的jQuery：

$('h3').click(function(){
    var panelID = $(this).data('panelId');
    $('#'+panelID).slideToggle("slow");
})

Answer 5

最简单的方法是使用多个选择器， http://api.jquery.com/multiple-selector/

Answer 6

如果以这样的方式设置html，你可以使用jQuery获取parent元素。

$(".SharedClassName").click(function(){
    $(this).parent(".collapse-this").slideToggle("slow");
}

多功能合二为一

6 个答案: