使用輸入複選框的多個數據屬性過濾

Question

我想要一個過濾一組data-attributes的jQuery函數。

在我的HTML結構我有一些列表項和有屬性有：

data-offer和data-subcat這兩個將被用於濾除使用多輸入複選框的項目。

到目前爲止，我有這個jQuery正在執行過濾，但並不像我想要的那樣。

$(".cs-widget-content").on("change", "input[type=checkbox]", function() { 
    $(".five-column > li.column").hide(); 
    $(".cs-widget-content").find("input:checked").each(function (i, el) { 
     $(".five-column > li.column").filter('[data-offer="' + el.id + '"]').show(); 
    }); 

    $(".cs-widget-content").find("input:checked").each(function (j, el) { 
     $(".five-column > li.column").filter('[data-subcat="' + el.id + '"]').show(); 
    }); 

}); 

這裏的JSFiddle

解決方案我想：

1. 所有的數據都應該是在頁面加載負荷（這是工作）。

2. 的輸入濾波器，用於兩個數據屬性應該一起工作（例如，當一個輸入被檢查data-offer它將顯示的數據，如果data-subcat檢查它會顯示該屬性的數據，以及，內以前檢查的data-offer。

3. 當任何輸入被選中時，數據應該是可見的回來。

期待您的幫助。

謝謝

Answer 1

迭代產品而不是過濾器，並決定是否應該顯示。

var filter1HasChecked = $("[data-filter=1]:checked").length; 
var filter2HasChecked = $("[data-filter=2]:checked").length; 

$("ul.products li").each(function(i,v){ 
    var $this = $(this); 

    if((!filter1HasChecked || $("#" + $this.data("offer")).is(":checked")) 
     && (!filter2HasChecked || $("#" + $this.data("subcat")).is(":checked"))){ 
     $this.show(); 
    }   
}); 

http://jsfiddle.net/Curt/k62kxm0x/4/

這種操作將變得昂貴的項目的100年代，但我會建議使用AJAX一些服務器端的過濾，或者實現前端框架如AngularJS的。