0

我正在尝试组合几个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;
    });
});
4

1 回答 1

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/

于 2013-03-23T11:43:04.220 回答