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

我想要的解决方案：

所有数据都应加载到页面加载（工作正常）。
两个数据属性的输入过滤器应该一起工作（例如，当检查输入data-offer时，它将显示该数据，如果data-subcat被检查，它将显示此属性的数据也在上一次检查data-offer。
当任何输入未经检查时，数据应该可见。

期待您的帮助。

谢谢

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等前端框架。

使用输入复选框

1 个答案: