Question

我需要有关过滤已过滤列表的帮助。

场景是我有一个列表（li项目，包含各种类别）的产品，这些产品正在按ID过滤，并且该ID正被推送到数组中。 E.g。

var $filtersSelected = [];

使用此代码，我可以成功过滤列表。

var $productItems = $('ul').find('li');
$.each($productItems, function() {

var $self = $(this),
    // Store classes of each product <li> item
    $classes = $self.attr('class').split(/\s+/),
    $match = false; 

// Check if any classes of each <li> matches those in '$filtersSelected' array
$.each($classes, function(i, c) {
    if ($.inArray(c, $filtersSelected) > -1) {
        $match = true;
    }
    return $classes;
});

// Do something
if ($match) {
    $self.show();
} else {
    $self.hide();
}
});

每次单击新的过滤器ID时，都会附加数组，并显示其类与数组匹配的任何项。但是，我需要的是能够遍历已经过滤的项目。

如果我已经有这些项目...... $filtersSelected = ["blue"]

["blue", "circle", "number"]
["blue", "square", "number"]
["blue", "triangle", "letter"]

然后点击“号码”。 $filtersSelected = ["blue", "number"]我只需要显示这些项目，直到获得完全匹配。

["blue", "circle", "number"]
["blue", "square", "number"]

提前致谢。

这是一段代码及其当前的工作原理。 http://jsfiddle.net/athanph/ebLyV/24/

你会看到我有3套过滤器。我想要的是根据所选的过滤器过滤精确的项目。如果我点击“蓝色”，将显示所有蓝色项目，如果我点击“圆圈”作为我的第二个过滤器，我只想显示蓝色和圆形项目，依此类推......

Answer 1

我认为你要做的是：

$('ul').find('li').filter(function(){
    return this.className.indexOf($filtersSelected) > -1;
}).hide();

我认为其他元素已经可见（ ie show（））。

在上面我使用了一些javascript代码，因为我对jquery并不是那么好。简而言之，我使用了我所知道的:)。

Answer 2

如果我很清楚你想要什么，这就是代码：

$(function () {
    var filtersSelected = [];
    $('#btAddToFilter').click(function () {
        var x = '.' + $('#txtAddToFilter').val();
        if ($.inArray(x, filtersSelected) < 0) {
            filtersSelected.push(x);
        }
        $('#ulProductItems').find('li').hide();
        $(filtersSelected.join(', ')).show()
    });
});

http://jsfiddle.net/csicky/NKFTL/

精确过滤数组

2 个答案: