Javascript Jquery筛选系统multiple select不工作

我一直在尝试解决这个问题，但我不太擅长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:

在此处测试：

---

看

我觉得它很好用。在CSS选择器中，表示与与否，因此单击“白色和马”表示所有白色或马的所有内容。选择“白色n马”时，您只需要白色马吗，有没有办法做到这一点，然后，如果我选择白色和马，我只过滤白色的马，而不是所有白色和马的东西？是的，a.V.这就是我的意思，我需要过滤白色的马，不是所有白色和马的东西，呵呵，只是测试一些东西，但我看到了另一个小问题。如果我想过滤掉黄色、白色和蓝色的马，它就不能正常工作，如果我只想选择不起作用的颜色。假设我想选择所有蓝色和黄色的动物。。我现在不能这样做。我想你可能需要引入另一个选择器来在OR和条件之间切换。否则，只需检查所有的动物名称，然后检查你提到的案例所需的颜色。好吧，你可以在这一页上看一看，这可能是一门外语，但至少你可以看到我的意思，这与我更新的小提琴一样工作。。是不是。。？？还是我遗漏了什么。。我想是的，有更简单的过滤方法吗？我的意思是我对jquery或javascript没有任何知识，只是试图创建一些我实际上不懂的东西。。。所以我不难理解你说的另一个开关是什么意思。

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

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


})