过滤 - 多项选择 jquery javascript答案

【问题标题】：Filtering - Multiple choices jquery javascript过滤 - 多项选择 jquery javascript
【发布时间】：2013-01-20 13:00:48
【问题描述】：

我正在尝试创建一个过滤脚本来帮助我搜索特定的东西。我对 javascript / jquery 不是很好，我找到了以下脚本并按照我喜欢的方式对其进行了更改。

一切正常，我可以选择白鸡，但问题是当我选择白色和黑色来搜索所有白色和黑色的动物时，它不起作用。

我做错了什么或者我可以改变什么来解决这个问题？

http://jsfiddle.net/d6Zyr/2/

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>

【问题讨论】：

但是您的代码中的 black 选项在哪里？
我把它改成了英文单词，这样你就可以理解了，但是忘记了一些东西......比如选项嘿嘿抱歉我现在要改变它
如果您使用默认的join，您将获得更多选择。这是你想要的吗：jsfiddle.net/d6Zyr/3
是的，这正是我所说的，感谢您的帮助！
现在的问题是，如果我选择白色、蓝色和马，它会找到所有白色或蓝色的动物，它不会只过滤掉马。jsfiddle.net/d6Zyr/9 你可以在这里看到它.

标签： javascript jquery html sorting filter

【解决方案1】：

更改为以下脚本会有所帮助。将 join 方法调用为 join('') ，这将有助于为多个类创建和案例。

join() 。 => 创建类和.white,.horse，因为默认添加了,。

join('') 。 => 将创建类为.white.horse，我想这就是你想要的。

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

【讨论】：