0

我有多个需要动画的容器。
基本上：你点击类： box- n（例如box-1）然后你slideToggle：box -child- n（例如box-child-1）。我想要一个简单的代码行来匹配box- n与其子类，而不是每个 box- n

的 click 函数来切换 box-child- n 。

html:

<div class="box-1">Some clickable container</div>
<div class="box-child-1">This should toggle when box-1 is clicked</div>

<div class="box-2">Some clickable container</div>
<div class="box-child-2">This should toggle when box-2 is clicked</div>

Et cetera...

当前的jQuery：

$('.box-1').click(function() { $('.box-child-1').slideToggle() });
$('.box-2').click(function() { $('.box-child-2').slideToggle() });

所需的 jquery 排序（由 allInt 函数组成。）：

var $n = allInt();

$('.box-' + n).click(function() {
    $('.box-child-' + _n).slidetoggle() // local variable to inter alia .box-1
})

我似乎想不出任何解决方案，所以我再次寻求帮助。我很感激你们给我的每一个建议！

4

2 回答 2

0

为了回答您的问题，这将解决问题：

$("div[class^='box-']").click(function(){
    $(this).parent().find('.' + $(this).attr('class').replace('-','-child-') ).slideToggle();

});

jsfiddle在这里。

无论如何，我不认为您使用了一种好的方法（您可以将孩子包装到父 div 中或使用 id）。

于 2013-11-03T00:30:41.097 回答
0

这是一种方法，它允许元素具有除了您用来配对它们的类​​之外的其他类：

$('div[class*="box-"]').click(function() {
    var c = this.className.match(/\bbox-\d+\b/);
    if (c)
        $('div.' + c[0].replace(/-/, '-child-')).slideToggle();
});

演示：http: //jsfiddle.net/6xM47/

也就是说，使用[name*=value]属性包含选择器来查找任何具有类属性的 div "box-"。然后在单击时提取实际类并检查它是否与"box-n"模式匹配 - 这允许元素上存在多个（不相关的）类。如果匹配，找到关联的"box-child-n"元素并切换它。

说了这么多，我建议像这样构建标记：

<div data-child="box-child-1">Some clickable container</div>
<div class="box-child-1">This should toggle when box-1 is clicked</div>

...因为 JS 简单直接：

$('div[data-child]').click(function() {
    $('div.' + $(this).attr('data-child')).slideToggle();
});

演示：http: //jsfiddle.net/6xM47/1/

于 2013-11-03T00:32:02.710 回答