javascript - 复选框 筛选按具有多个类的类显示的 div

Question

我有这个http://jsfiddle.net/RyZy8/221/

JS

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('#main-div > div > div > div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('#main-div > div > div > div[class=' + this.id + ']').show();
        });
    } else {
        $('#main-div > div > div > div').show();

}
});

HTML:

<input type="checkbox" id="one">
<input type="checkbox" id="two">
<input type="checkbox" id="three">

<div id="main-div">
<div>
<div>
<div class="one two other classes">
Content
</div>
</div>
</div>
</div>

<div id="main-div">
<div>
<div>
<div class="one three other classes">
Content
</div>
</div>
</div>
</div>

<div id="main-div">
<div>
<div>
<div class="two three other classes">
Content
</div>
</div>
</div>
</div>

如果使用单个类，则复选框将进行精细过滤，但在存在多个类时则不会。

我如何更改以下内容以允许多个类

$('#main-div > div > div > div[class=' + this.id + ']').show();

Answer 1

您可能不想在此处使用属性选择器，因为它将查找精确的文本。您将需要使用类选择器，它只会查找该类是否存在，而不管是否存在其他类。

$('#main-div > div > div > div.' + this.id).show();

我还建议不要像您一样使用嵌套的直接子选择器 (div > div > div)。这是非常脆弱的，并且会在您更改 HTML 层次结构时破坏，这在重构时会给您带来痛苦。

像这样的东西可能会更好:

$('#main-div .' + this.id).show();

话虽如此，您也永远不想在页面上重复使用 id。 According to Mozilla Developer Network ，id“在文档中必须是唯一的”。如果您想使用 getElementById，它只会返回找到的第一个项目，而不是项目数组。在这种情况下， main-div 可能应该是一个类。