使用输入复选框进行多个数据属性过滤

Question

我想要一个jQuery函数来过滤一组data-attributes。

在我的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. 当任何输入为unChecked时，数据应该是可见的。

期待您的帮助。

谢谢

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这样的前端框架。