Question

假设我想过滤颜色（红色，黄色或蓝色）和尺寸（小，中或大）和材料（羊毛，棉花，丝绸）。我将有三套复选框。如果用户选中“红色”复选框和“中”复选框，我希望Isotope显示红色和中等的项目。到目前为止，没问题。但是，如果用户检查红色和黄色复选框以及中型和大型复选框以及羊毛和丝绸复选框，该怎么办？现在我希望Isotope显示((medium OR large) AND (red OR yellow) AND (wool OR silk))的项目。

构建一个适合这种情况的jQuery选择器字符串对我来说似乎很复杂，特别是如果有几十个组，每个组都包含几十个选项。

单独使用jQuery我可以执行以下操作：

$('.medium, .large').filter('.red, .yellow').filter('.wool, .silk');

但是如果我只需要构建整个选择器一次以将其完全形成传递给Isotope，我就必须这样做：

`.medium.red.wool, .medium.red.silk, .medium.yellow.wool, .medium.yellow.silk, .large.red.wool, .large.red.silk, .large.yellow.wool, .large.yellow.silk`

如您所见，从三个组中选择了两个项目，我的选择器中有2 ^ 3个以逗号分隔的字符串。现在假设我有六个过滤组：

Color (red, blue, yellow, green, purple, black)
Size (tiny, small, medium, biggish, large, extra-large)
Price (very-cheap, cheap, medium, expensive, very-expensive, extraordinarily-expensive)
Material (cotton, wool, satin, linen, felt, wood, iron)
Type (archer, hunter, wizard, mage, spy, druid)
Popularity (not-popular, mildly-popular, somewhat-popular, medium-popular, quite-popular, very-popular)

让我们说用户检查每组中的前五个选项。我的选择器字符串必须包含5 ^ 6个以逗号分隔的字符串，每个字符串包含六个术语。如果每个术语平均5个字符，其中五个.将它们分开，那么我将有5 ^ 6个字符串，每个长度为35个字符，我的选择器的总长度大约为546,875个字符。

同位素是否为我提供了解决此问题的更好方法？

Answer 1

jQuery .filter也接受一个函数，而不仅仅是一个选择器字符串，所以你可以创建一个函数。

$elem.isotope({
    filter: function() {
        var $this = $(this);
        return $this.is('.medium, .large') && $this.is('.red, .yellow') && $this.is('.wool, .silk');
    }
});

观察同位素源代码，它似乎应该可以工作，因为它们将filter参数传递给jQuery过滤器方法。

你可以通过传递一个选择器数组来实现这样的功能：

function makeFilterFunction( selectorsArray ) {
    var length = selectorsArray.length;
    return function() {
        var $this = $(this);

        for( var i = 0; i < length; ++i ) {
            if( !$this.is( selectorsArray[i] ) ) {
                return false;
            }
        }

        return true;
    };
}

然后：

$elem.isotope({
    filter: makeFilterFunction(['.medium, .large', '.red, .yellow', '.wool, .silk'])
});

在我的答案开头是动态等效的静态代码。

JavaScript同位素 - 如何智能地创建多组过滤器以在一个容器上协同工作？

1 个答案: