Question

我一直在努力解决这个问题，但我在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>

在这里测试:) http://jsfiddle.net/d6Zyr/9/

Answer 1

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


})

参见 DEMO

Jquery过滤系统多选不起作用

1 个答案: