构建一个交叉类别过滤器，使用复选框（类）使用复选框显示div（jQuery）

Question

stackoverflow启发了我使用复选框构建“类别过滤器”，并且我卡住了一半。我想实现以下：三个类别（品牌，类，颜色）通过3个“复选框柱”被呈现在表内：

<table id="filters" width="620px"> 
    <tr> 
    <td width="144" align="left" valign="top"> 
    <input type="checkbox" value="Audi" id="filter-Audi" >Audi<br> 
    <input type="checkbox" value="BMW" id="filter-BMW" >BMW<br> 
    </td> 
    <td width="233" align="left" valign="top"> 
    <input type="checkbox" value="Compact" id="filter-Compact" >Compact<br> 
    <input type="checkbox" value="Limousine" id="filter-Limousine" >Limousine<br> 
    <input type="checkbox" value="SUV" id="filter-SUV" >SUV<br> 
    <input type="checkbox" value="Sport" id="filter-Sport" >Sport<br> 
    </td> 
    <td width="233" align="left" valign="top"> 
    <input type="checkbox" value="silver" id="filter-silver" >silver<br> 
    <input type="checkbox" value="blue" id="filter-blue" >blue<br> 
    <input type="checkbox" value="red" id="filter-red" >red<br> 
    <input type="checkbox" value="white" id="filter-white" >white<br> 
    </td> 
    </tr> 
</table> 

根据所选择的复选框我想显示包含类一定的div名称与选中的复选框ID相同。这已经在工作。我现在需要的是为每个类别制定一个“排除”过滤器的方法。

手段，如果用户检查以下内容：

奥迪&轿车&红 - 只有div的方含这些类别应该出现。在我的例子中，所有包含奥迪&豪华轿车&红色apper，但当然宝马div也出现（这是错误的div）。换句话说：我需要一个额外的“过滤方法”，其中包括每个类别按类别划分的类别：即：如果用户检查奥迪，第二和第三类别的复选框应只涉及包含奥迪的div类。如果用户检查奥迪&紧凑型&白色出现的div至少包含所有三个类。

jQuery的一部分，到目前为止（发现这个计算器上）：

$("#filters :checkbox").click(function() { 
    var re = new RegExp($("#filters :checkbox:checked").map(function() { 
     return this.value; 
    }).get().join("|")); 
    $.each($('.filterme'), function() { 
     var $this = $(this); 
     $this[re.source != "" && re.test($this.attr("class")) ? "slideDown" : "slideUp"](); 
    }); 
}); 

我把现有代码的jsfiddle：

http://jsfiddle.net/ar3PY/

很想如果有人可以帮助这里！

Answer 1

试试这个： 更改HTML，包括为每个类别一类（品牌，类别，颜色）

<table id="filters" width="620px"> 
    <tr> 
    <td width="144" align="left" valign="top"> 
    <input type="checkbox" class="brand" value="Audi" id="filter-Audi" >Audi<br> 
    <input type="checkbox" class="brand" value="BMW" id="filter-BMW" >BMW<br> 
    </td> 
    <td width="233" align="left" valign="top"> 
    <input type="checkbox" class="class" value="Compact" id="filter-Compact" >Compact<br> 
    <input type="checkbox" class="class" value="Limousine" id="filter-Limousine" >Limousine<br> 
    <input type="checkbox" class="class" value="SUV" id="filter-SUV" >SUV<br> 
    <input type="checkbox" class="class" value="Sport" id="filter-Sport" >Sport<br> 
    </td> 
    <td width="233" align="left" valign="top"> 
    <input type="checkbox" class="color" value="silver" id="filter-silver" >silver<br> 
    <input type="checkbox" class="color" value="blue" id="filter-blue" >blue<br> 
    <input type="checkbox" class="color" value="red" id="filter-red" >red<br> 
    <input type="checkbox" class="color" value="white" id="filter-white" >white<br> 
    </td> 
    </tr> 
</table> 

修改Java脚本代码如下：

var getFilter = function(category) { 
    var filter = $("#filters ." + category + ":checked").map(function() { 
     return "." + this.value; 
    }).get().join(","); 
    filter = (filter.length > 0) ? filter : "*"; 
    console.log(filter); 
    return filter; 
} 

$("#filters :checkbox").click(function() { 
    var all = $(".filterme"); 
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color")); 
    all.not(tgts).slideUp(); 
    tgts.slideDown(); 
}); 

的jsfiddle： http://jsfiddle.net/ar3PY/2/

Answer 2

我对你的html做了一些改变，想出了结果。 我所做的更改是向类似于下面的td标签添加一个类。

<table id="filters" width="620px"> 
    <tr> 
    <td class="car" width="144" align="left" valign="top"> 
    <input type="checkbox" value="Audi" id="filter-Audi" >Audi<br> 
    <input type="checkbox" value="BMW" id="filter-BMW" >BMW<br> 
    </td> 
    <td class="type" width="233" align="left" valign="top"> 
    <input type="checkbox" value="Compact" id="filter-Compact" >Compact<br> 
    <input type="checkbox" value="Limousine" id="filter-Limousine" >Limousine<br> 
    <input type="checkbox" value="SUV" id="filter-SUV" >SUV<br> 
    <input type="checkbox" value="Sport" id="filter-Sport" >Sport<br> 
    </td> 
    <td class="color" width="233" align="left" valign="top"> 
    <input type="checkbox" value="silver" id="filter-silver" >silver<br> 
    <input type="checkbox" value="blue" id="filter-blue" >blue<br> 
    <input type="checkbox" value="red" id="filter-red" >red<br> 
    <input type="checkbox" value="white" id="filter-white" >white<br> 
    </td> 
    </tr> 
</table> 

接下来我用Chandu的答案修改后的版本按以下方式分类过滤出来的类别。

$("#filters :checkbox").click(function() { 
      var filterCarString = $("#filters :checkbox:checked").length == 0 ? "*" : 
      $("#filters .car :checkbox:checked").length == 0 ? "*" : 
        $("#filters .car :checkbox:checked").map(function() { 
         return "." + this.value; 
        }).get().join(",."); 

      var filterTypeString = $("#filters :checkbox:checked").length == 0 ? "*" : 
        $("#filters .type :checkbox:checked").length == 0 ? "*" : 
        $("#filters .type :checkbox:checked").map(function() { 
         return "." + this.value; 
        }).get().join(",."); 

      var filterColorString = $("#filters :checkbox:checked").length == 0 ? "*" : 
        $("#filters .color :checkbox:checked").length == 0 ? "*" : 
        $("#filters .color :checkbox:checked").map(function() { 
         return "." + this.value; 
        }).get().join(",."); 


      var filterTgts = $('.filterme'); 
      var elems = filterTgts.filter(filterCarString); 
       elems = elems.filter(filterTypeString); 
       elems = elems.filter(filterColorString).slideDown(); 

      filterTgts.not(elems).slideUp(); 
}); 

我希望这就是你要找的。