Jquery 如果选定值=';全部';

Jquery 如果选定值=';全部';,jquery,filter,custom-data-attribute,Jquery,Filter,Custom Data Attribute,下面的函数允许用户按数据属性筛选产品,并通过创建所选值的数组同时按多个值进行筛选。我需要显示与任何过滤器匹配的所有结果,因此我用或语句构造了函数。如何修改它响应选中的checked.filter(“.all”)的方式,使其不显示所有产品,而只是不按该数据属性进行过滤 我在这里发布了一个功能示例:如果选中“无袖”+“红色”,则显示所有“无袖”或“红色”项目。如果用户随后选中“所有颜色”,则我希望忽略颜色过滤器(data color=“All”),只应用样式过滤器(data style=“Sleev

下面的函数允许用户按数据属性筛选产品,并通过创建所选值的数组同时按多个值进行筛选。我需要显示与任何过滤器匹配的所有结果,因此我用
语句构造了函数。如何修改它响应选中的
checked.filter(“.all”)
的方式,使其不显示所有产品,而只是不按该数据属性进行过滤

我在这里发布了一个功能示例:如果选中“无袖”+“红色”,则显示所有“无袖”或“红色”项目。如果用户随后选中“所有颜色”,则我希望忽略颜色过滤器(
data color=“All”
),只应用样式过滤器(
data style=“Sleeveless”
),以便它显示2个项目,而不是所有项目

    var selected = { color: [], style: [] };   
    $('.filterOptions').on("change", ":checkbox", function (e) {
        var type = $(e.delegateTarget).data("type");
        var $this = $(this);
        var attrValue = $this.data(type);
        if ($this.parent().hasClass("active")) {
            $this.parent().removeClass("active");
            selected[type].splice(selected[type].indexOf(attrValue),1);
        }
        else {
            $this.parent().addClass("active");
            selected[type].push(attrValue);
        }            
        var checked = $(":checked", ".filterOptions");            
        // show all of the available options if...
        if (checked.length == 0 || checked.filter(".all").length > 0) {
            $('#content').find('*').show();
        } 
        else {
            $("#content").find("*").hide();
            for (var key in selected) {
                $.each(selected[key], function(index,item) {
                    $('#content').find('[data-' + key + ' *="' + item + '"]').show();
                });
            }
        }
    }); 

更改
if
逻辑如何:

        if (checked.length == 0 // ...no boxes are checked
            || // ...or...
            checked.filter(".all").length > 0)
例如:

        if (checked.not(".all").length == 0)

这允许单个过滤器覆盖“全部”逻辑。

颜色和样式是否完全分开?也就是说,如果选择了蓝色和圆领,它应该只显示蓝色圆领,还是只按您刚才单击的内容进行过滤?如果选择了其他内容,您可以忽略“全部”复选框,但从用户界面的角度来看,这可能会令人困惑。我建议这样做,如果选中任何单个属性,它会自动取消选中“所有”。同样,如果选中“all”,它会自动取消选中所有单个属性。@BenLee我这样做是因为我认为如果不更改已检查的内容,用户可能会更容易。这样,如果他们取消选中“全部”值,他们就不必检查所有值again@DaiYoukai-对于此页面,我需要它显示与选中的任何值匹配的所有项目,因此它应该显示蓝色或蓝色的任何项目Crewneck@DaiYoukai-对于此页面,我需要它显示与选中的任何值匹配的所有项目,因此,它应该显示任何蓝色或圆锥形的项目。我在上面的例子中添加了更多的细节,希望这会使它更容易理解,这解决了部分问题:-)但是我实际上需要它来排除整个过滤器,因为如果我只是修改那一行,它仍然会根据已经检查过的颜色进行过滤(正如我向@BenLee解释的那样,我认为如果用户在勾选“全部”时不取消勾选这些值,对他们来说会更容易些)。我意识到我可能没有在我给出的示例中预期的那么清楚,所以我添加了更多的细节,希望能够澄清一些问题