2

假设我想过滤颜色（红色、黄色或蓝色）和尺寸（小、中或大）和材料（羊毛、棉花、丝绸）。我将有三组复选框。如果用户选中“红色”复选框和“中等”复选框，我希望 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 个.s 分隔，那么我将有 5^6 个字符串，每个 35 个字符长，我的选择器的总长度约为 546,875 个字符。

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

4

1 回答 1

5

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'])
});

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

于 2012-11-12T23:19:49.483 回答