我想使用复选框过滤一些内容.
我设法做到这一点归功于earlier post,我在这里简化了一些DEMO.
我的问题是每个内容项可以附加多个类别.当我选择类别A和类别B然后取消选择类别B时,将删除同时附加两个类别的内容项.
我正在研究的项目将包含两个以上的类别.内容项可以附加许多类别
HTML：
<ul id="filters">
<li>
<input type="checkBox" value="categorya" id="filter-categorya" />
<label for="filter-categorya">Category A</label>
</li>
<li>
<input type="checkBox" value="categoryb" id="filter-categoryb" />
<label for="filter-categoryb">Category B</label>
</li>
</ul>
<div class="categorya categoryb">A,B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
使用Javascript：
$('input').click(function() {
var category = $(this).val();
if (!$(this).attr('checked')) $('.' + category).hide();
else $('.' + category).show();
});
解决方法
我认为两种最直接的方法是点击任何过滤器复选框：
>隐藏所有< div>元素,然后遍历复选框和每个选中的.show()< div>具有相关类别的元素.
>遍历所有复选框以创建要显示的类的列表,然后遍历< div>元素,检查每个元素以查看它是否具有其中一个类,并根据需要使用.hide()或.show().
是否有一些常规选择器可用于获取所有< div>元素？他们是否有一个特定的容器元素,就像所有复选框都是“#filters”的后代一样？
// Solution 1
$("#filters :checkBox").click(function() {
$("div").hide();
$("#filters :checkBox:checked").each(function() {
$("." + $(this).val()).show();
});
});
演示：http://jsfiddle.net/6wYzw/41/
// Solution 2
$("#filters :checkBox").click(function() {
var re = new RegExp($("#filters :checkBox:checked").map(function() {
return this.value;
}).get().join("|") );
$("div").each(function() {
var $this = $(this);
$this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
});
});
演示：http://jsfiddle.net/6wYzw/42/
我想第一种方式更短,更容易维护……
