JavaScript同位素 - 如何智能地创建多组过滤器以在一个容器上协同工作？ [英] JavaScript Isotope - How can I intelligently create multiple groups of filters to work together on one container?

问题描述

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

Lets say I want to filter on both color (red, yellow, or blue) and on size (small, medium, or large) and on material (wool, cotton, silk). I will have three sets of checkboxes. If a user checks the "red" checkbox and the "medium" checkbox, I want Isotope to display items that are both red and medium. So far, no problem. But what if the user checks both the red and yellow checkboxes as well as both the medium and large checkboxs and both the wool and silk checkboxes? Now I want Isotope to display items that are ((medium OR large) AND (red OR yellow) AND (wool OR silk)).

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

Building a jQuery selector string to fit this scenario seems complicated to me, especially if there are dozens of groups, each containing dozens of options.

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

With jQuery alone I could do the following:

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

但是如果我必须只构建整个选择器一次，以便将其完全传递给Isotope，我不得不这样做：

But if I have to build the whole selector only one time in order to pass it fully-formed to Isotope, I would have to do:

`.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个以逗号分隔的字符串。现在假设我有六个过滤组：

As you can see, with two items selected from three groups I have 2^3 comma-separated strings in my selector. Now imagine I have six filtering groups:

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个。分隔它们，那么我将有5 ^ 6个字符串，每个35个字符长，我的选择器的总长度大约为546,875字符。

And let's say the user checks the first five options in each group. My selector string would have to contain 5^6 comma-separated strings, each one containing six terms. If each term averaged 5 characters, with five .s separating them, then I would have 5^6 strings, each 35 characters long, for a total length of my selector around 546,875 characters.

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

Does Isotope provide a better way for me to solve this problem?

推荐答案

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

the jQuery .filter accepts a function as well, not just a selector string, so you could make a function.

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

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

Looking at isotope source code, it seems like it should work since they pass the filter parameter to jQuery filter method.

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

You can make a function like that on the fly by passing a selectors array:

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

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

Is the dynamic equivalent of the static code at the start of my answer.

这篇关于JavaScript同位素 - 如何智能地创建多组过滤器以在一个容器上协同工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！