使用复选框根据类筛选div

Question

我正试图通过使用复选框表单来过滤基于某些类的div。

我一直在使用以下小提琴，这几乎符合我的需求：http://jsfiddle.net/6wYzw/738/

但是，如果在Black/Color类的顶部包装一个额外的<div class="anything">，则过滤将不再有效。

<div class="Test">
<div class="Black Color">Black, Color</div>
<div class="Black">Black</div>

如何对其进行编码以允许div被封装在更多的div中？

谢谢！

Answer 1

这是因为您在更改处理程序中隐藏了所有div元素

$("#filters :checkbox").change(function() {
    $(".colors > div").hide();
    $("#filters :checkbox:checked").each(function() {
        $(".colors ." + $(this).val()).show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="anything">
    <ul id="filters">
        <li>
            <input type="checkbox" value="Black"/>
            <label for="filter-categorya">Black</label>
        </li>
        <li>
            <input type="checkbox" value="Color"/>
            <label for="filter-categoryb">Color</label>
        </li>
    </ul>
</div>
<div class="colors">
    <div class="Black Color">Black, Color</div>
    <div class="Black">Black</div>
    <div class="Black">Black</div>
    <div class="Color">Color</div>
    <div class="Color">Color</div>
</div>

Answer 2

曾在IRC上与OP合作过这个。

HTML

<input type="checkbox" value="grn_div" name="cb" id="grn_cb" />
<label for="grn_cb">Green</label>
<input type="checkbox" value="red_div" name="cb" id="red_cb" />
<label for="red_cb">Red</label>
<div id="grn_div" > 
    <h2>Greeen SHOW!</h2>
</div>
<div id="red_div">
    <h2> REED WATERMELON</h2>
</div>

jQuery

$(document).ready(function() {
    $('[id*="_div"]').hide();
});
$(':checkbox[name="cb"]').click(function () {
   $("#"+ $(this).val()).toggle();
});

这是我的解决方案，所以它不应该与当前设置有太大冲突。