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

Question

假设我想过滤颜色(红色、黄色或蓝色)、尺寸(小号、中号或大号)和 Material (羊毛、棉、丝绸)。我将有三组复选框。如果用户选中“红色”复选框和“中号”复选框，我希望 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 个字符。

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

Answer 1

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

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

查看同位素源代码，它似乎应该可以工作，因为它们将过滤器参数传递给 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'])
});

是我答案开头的静态代码的动态等价物。