我正在尝试创建一个过滤脚本来帮助我搜索特定的东西。我对 javascript / jquery 不是很好,我找到了以下脚本并按照我喜欢的方式对其进行了更改。
一切正常,我可以选择白鸡,但问题是当我选择白色和黑色来搜索所有白色和黑色的动物时,它不起作用。
我做错了什么或者我可以改变什么来解决这个问题?
Javascript:
$(function(){
$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > li'),
$checked = $('input:checked');
if ($checked.length)
{
var selector = $checked.map(function ()
{
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).show().addClass("show");
}
else
{
$lis.show().removeClass("show");
}
});
})
html:
<div class="tags">
<fieldset class="filter-grp">
<label><input type="checkbox" rel="white" name="year" /> white </label><br>
<label><input type="checkbox" rel="blue" name="year" /> blue </label><br>
<label><input type="checkbox" rel="yellow" name="year" /> yellow </label><br>
</fieldset>
<br>
<fieldset class="filter-grp">
<label><input type="checkbox" rel="horse" name="type" /> horse</label><br>
<label><input type="checkbox" rel="chicken" name="type" /> chicken</label><br>
<label><input type="checkbox" rel="cow" name="type" /> cow</label><br>
</fieldset>
<br>
</div>
<ul class="results">
<li class="white cow">white cow</li>
<li class="white horse">white horse</li>
<li class="white chicken">white chicken</li>
<li class="black cow">white cow</li>
<li class="blue horse">white horse</li>
<li class="white chicken">white chicken</li>
</ul>