Jquery过滤系统多重选择不起作用

Jquery filtering system multiple select doesn't work

本文关键字：选择 不起作用 过滤 系统 Jquery      更新时间：2023-09-26

我一直在努力解决这个问题，但我不是很擅长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");   
    console.log(selector)
}
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="yellow cow">yellow cow</li>
<li class="blue horse">blue horse</li>
<li class="white chicken">white chicken</li>
 </ul>

test here:)http://jsfiddle.net/d6Zyr/9/

$(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();
        selector = selector.replace(",", "") // removes OR selector
        $lis.hide().filter(selector).show().addClass("show");
        console.log(selector)
    } else {
        $lis.show().removeClass("show");
    }
});

})
<<p>看到演示/strong>
相关文章：