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

【问题标题】：Modify this find function to accommodate more than one value修改此查找函数以容纳多个值
【发布时间】：2013-03-15 10:42:51
【问题描述】：

此功能允许用户按颜色过滤产品（使用data-attributes）。如何修改它以容纳多个值？

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

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

我假设我应该使用 $('input:checkbox:checked').data('color') 之类的东西而不是 $(this).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;
    });
});   

【问题讨论】：

• 我会尝试保留一个值数组。单击时，检查是否在数组中，如果是，则将其删除，如果不添加。然后遍历这些值并显示匹配的元素。
• @j08691 - 这很有意义 :-) 你介意给我看一下代码吗？
• @j08691 - 我假设不是 $(this).data('color');我应该使用 $('input:checkbox:checked').data('color'); 之类的东西，但我不确定如何正确构造它
• 您介意在
• 元素上使用类的解决方案吗？