Question

如何在删除所有过滤器后让此功能恢复显示所有内容？

我尝试将 if (attrColor == 'All') {...} 更改为 if (attrColor == 'All' || attrColor == '') {...}

我在这里发布了一个简单的函数示例：http://jsfiddle.net/chayacooper/WZpMh/88/

$(document).ready(function () {
    var selected = [];
    $('#attributes-Colors *').click(function () {
        var attrColor = $(this).data('color');
        var $this = $(this);
        if ($this.parent().hasClass("active")) {
            $this.parent().removeClass("active");
            selected.splice(selected.indexOf(attrColor),1);
        }
        else {
            $this.parent().addClass("active");
            selected.push(attrColor);
        }
        if (attrColor == 'All') {
            $('#content').find('*').show();
        } else {
        $("#content").find("*").hide();
        $.each(selected, function(index,item) {
            $('#content').find('[data-color *="' + item + '"]').show();
        });
        }
        return false;
    });
});

Answer 1

请参阅：Demo

if (attrColor == 'All' || !selected.length) {
    $('#content').find('*').show();
} else {
    $("#content").find("*").hide();
    $.each(selected, function (index, item) {
        $('#content').find('[data-color *="' + item + '"]').show();
    });
}

编辑：

根据@ ArunPJohny的建议更新：

使用.children()选择器会优于*选择器来获取孩子li

if (attrColor == 'All' || !selected.length) {
    $('#content').children().show();
} else {
    $("#content").children().hide();
    $.each(selected, function (index, item) {
        $('#content').find('[data-color *="' + item + '"]').show();
    });
}

删除所有过滤器后，还原以显示所有过滤器

1 个答案: