Question

我有多个容器需要动画。
基本上：你单击class：box- n （例如box-1），你可以使用slideToggle：box-child- n （例如box-child-1）。 />
我想要一个与box- n n 切换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
})

我似乎无法想到任何解决方案，所以我再次寻求帮助。我感谢大家给你的每一个建议！

Answer 1

要回答你的问题，这将解决问题：

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

});

jsfiddle here。

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

Answer 2

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

$('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] attribute contains selector查找任何具有"box-"的类属性的div。然后单击时提取实际的类并检查它是否与"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/

如何选择递增1的多个类及其匹配的子项？

2 个答案: