Question

我尝试合并多个find函数，以便按多个数据属性过滤项目。我希望它能够返回与任何过滤器匹配的所有项目，并在删除其中一个过滤器后恢复到其余过滤器的更严格标准（我将在稍后添加排名算法 - 可能QuickSilver，但仍然想出来 - 为了首先显示更强的匹配）。

我不确定如何正确组合不同的find功能，以便它们能够正确地协同工作。目前，过滤器一次只能工作一个（最后触发的那个）。我在这里发布了一个简单的函数示例：http://jsfiddle.net/chayacooper/WZpMh/13/

更新 - @Sergei Gorjunov的解决方案几乎就在那里，我只需要帮助修改它以使用OR而不是AND，这样它就会显示与其中一个过滤器匹配的产品（用&&替换||使函数停止工作）。

我还修改了大部分代码，因此不需要指定标记元素（即<li>和<td>），以及相应地更新了小提琴。

$(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;
    });
});

Answer 1

我找到了如何过滤这些项目的方法。

$.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：http://jsfiddle.net/WZpMh/7/

组合几个find（）函数以显示匹配所有指定过滤器的结果

1 个答案: