2

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

$(".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)，但我有点卡住了。所以希望有人可以提供帮助。

4

6 回答 6

4

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

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

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

jsFiddle Demo 看看我没有说谎 ;)

于 2011-06-27T19:06:25.770 回答
1 
$(".a, .b, .c")
.addClass('repeatingClass')
.find('h3')
.click(function() {
   $(this).parents('.repeatingClass').find('.collapse-this').slideToggle("slow");
});
于 2011-06-27T19:06:25.503 回答
1

我将对其进行破解：

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

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

于 2011-06-27T19:10:00.870 回答
0

我喜欢使用 data- 属性来存储对页面上其他 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");
})
于 2011-06-27T19:08:23.497 回答
-1

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

于 2011-06-27T19:06:53.143 回答
-2

如果 html 以这样一种方式设置，您可以使用 jQuery 获取父元素。

$(".SharedClassName").click(function(){
    $(this).parent(".collapse-this").slideToggle("slow");
}
于 2011-06-27T19:06:35.183 回答