Jquery 组合几个find（）函数以显示与所有指定筛选器匹配的结果

我正在尝试组合几个

find

函数，以便通过多个数据属性过滤项目。我希望它返回与任何过滤器匹配的所有项目，并在删除其中一个过滤器时恢复到剩余过滤器的更严格标准（稍后我将添加一个排序算法-可能是QuickSilver，但仍在计算-以便首先显示更强的匹配）

我不知道如何正确组合不同的

find

函数，以便它们能够正确地协同工作。目前，过滤器一次只能工作一个（以最后触发的为准）。我在这里发布了一个函数的简单示例：

---

更新-@Sergei Gorjunov的解决方案就快到了，我只需要一些帮助来修改它以使用或代替，这样它就会显示与任一过滤器匹配的产品（用

&&

替换

|

使函数停止工作）

我还修改了大部分代码，使其不需要指定标记元素（即

和

），并相应地更新了小提琴

$(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('td:not([data-color="' + attrColor + '"])').hide();
            $('#content').find('[data-color ~="' + attrColor + '"]').show();
        }
        return false;
    });

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

---

我找到了筛选这些项目的方法

$.fn.extend({
    filterMyItems: function() {
        function filterItems() {            
            var color = $('#filterColorOptions').find('li.active a').data('color'),
                style = $('#filterStyleOptions').find('li.active a').data('style');

            if (color == "All") color = ".+";
            if (style == "All") style = ".+";

            var colorPattern = new RegExp(color, 'i'),
                stylePattern = new RegExp(style, 'i');

            return (colorPattern.test($(this).data('color')) && stylePattern.test($(this).data('style')));
        }

        $(this).filter(filterItems).show();
        $(this).not(filterItems).hide();
    }
}); 

$(document).ready(function () {
    $('.filterOptions a').click(function(e){
        e.preventDefault();
        $(this).closest('.filterOptions').find('.active').removeClass('active');
        $(this).parent().addClass('active');
        $('#content li').filterMyItems();
    });    
});

---

链接到jsfiddle:

这就是我想要的：-D我如何返回匹配“style”或“color”的结果（将“&&&”替换为“| |使函数停止工作，所以显然不是这样；-））。另外，您是否介意稍微解释一下代码，以便我知道如何使用它（例如，将其更改为使用复选框，以便允许用户为每个数据属性选择多个值）？如果您将| |而不是&，则它会起作用。但如果您只选择红色，它的意思是“给我所有红色项目或所有具有样式属性的项目”。在这种情况下，我们可以在过滤条件中执行一些条件，比如

if（style==“All”&&color！=“All”）style=“”。关于解释-我可以为你解释，但最好在facebook或skype上解释。我原以为它会工作，但功能却停止了工作：-（除了“&&”之外，还有什么我需要更改的吗？你能让我了解代码真是太好了（我可能会告诉你：-），但是如果您可以在代码中添加一些注释，可能会容易得多。这样我就可以熟悉它，并在它周围玩耍，如果在那之后我还有任何问题，它们将是更加集中的问题：-）