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

Question

我想要一个 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/

这种操作对于数百个项目来说会变得昂贵，但我会建议使用 AJAX 进行一些服务器端过滤，或者可能实现前端框架，例如 AngularJS .