0

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

场景是我有一个li由 ID 过滤的产品列表（具有各种类别的项目），并且该 ID 被推送到数组中。例如

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 套过滤器。我想要的是根据选择的过滤器过滤确切的项目。如果我点击“蓝色”，所有蓝色项目都会显示，如果我点击“圆圈”作为我的第二个过滤器，我只想显示蓝色和圆圈项目，依此类推......

4

2 回答 2

0

我认为您正在尝试做的是：

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

我认为其他元素已经可见（即 show()）。

在上面我使用了一些 javascript 代码，因为我对 jquery 不太擅长。简而言之，我使用了我所知道的:)。

于 2013-11-05T14:39:54.447 回答
0

如果我理解你想要什么，这就是代码：

$(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/

于 2013-11-05T15:22:11.963 回答