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元素

＆＃13;

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

＆＃13;

<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>

＆＃13;

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();
});

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

根据具有复选框的类过滤div

2 个答案: