jquery - 修改此查找函数以容纳多个值

Question

此功能允许用户按颜色过滤产品(使用 data-attributes )。我如何修改它以适应多个值？

我希望该函数返回与任何数据属性值匹配的所有项目，并在删除其中一个过滤器时恢复到其余过滤器的更严格标准(通过取消选中特定值或所有颜色值) )。我在这里发布了一个带有该函数的简单示例的 fiddle :http://jsfiddle.net/chayacooper/WZpMh/21/ 。 fiddle 目前有 data-attributes里面<li>标签，但我想使用复选框以允许多个选择。

编辑 - 产品可以在数据颜色中具有更多的值(value)(即黑色、白色)，表明它有两种颜色可供选择，并且可以是多种颜色< em>(即黑白)。

我假设不是 $(this).data('color') 我应该使用类似 $('input:checkbox:checked').data('color') 的东西，但我不知道如何构建它。

$(document).ready(function () {
    $('#attributes-Colors *').click(function () {
        var attrColor = $(this).data('color');
        $('#attributes-Colors').removeClass('active');
        $(this).parent().addClass('active');
        if (attrColor == 'All') {
            $('#content').find('*').show();
        } else {
            $('#content').find('li:not([data-color="' + attrColor + '"])').hide();
            $('#content').find('[data-color ~="' + attrColor + '"]').show();
        }
        return false;
    });
});   

Answer 1

这是一种方法:

http://jsfiddle.net/WZpMh/20/

我没有为“所有颜色”链接添加任何处理，但这应该很容易做到

    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);
        }
        $("#content").find("*").hide();
        $.each(selected, function (index, item) {
            $('#content').find('[data-color ~="' + item + '"]').show();
        });
        return false;
    });

基本思想是保留所选颜色的数组，并且每次单击其中一个颜色按钮时，您都将隐藏所有项目，然后重新显示与所选中的所有颜色匹配的项目 数组。

对于所有颜色，您只需添加一些额外的逻辑即可清空所有其他颜色并使所有项目可见。