構建一個交叉類別過濾器，使用複選框（類）使用複選框顯示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(); 
}); 

我希望這就是你要找的。