2

色（赤、黄、青）とサイズ（小、中、大）と素材（ウール、綿、絹）の両方でフィルターをかけたいとしましょう。3セットのチェックボックスがあります。ユーザーが「赤」チェックボックスと「中」チェックボックスをチェックした場合、Isotopeに赤と中の両方のアイテムを表示させたい。これまでのところ、問題ありません。しかし、ユーザーが赤と黄色の両方のチェックボックスと、中と大のチェックボックスの両方、およびウールとシルクのチェックボックスの両方をチェックした場合はどうなるでしょうか。次に、Isotopeに。であるアイテムを表示させます((medium OR large) AND (red OR yellow) AND (wool OR silk))。

このシナリオに合うようにjQueryセレクター文字列を構築することは、特に、それぞれが数十のオプションを含む数十のグループがある場合、私には複雑に思えます。

jQueryだけで、次のことができます。

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

しかし、完全な形でIsotopeに渡すために、セレクター全体を1回だけ作成する必要がある場合は、次のことを行う必要があります。

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

ご覧のとおり、3つのグループから2つのアイテムを選択すると、セレクターに2^3のコンマ区切りの文字列があります。ここで、6つのフィルタリンググループがあると想像してください。

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つのオプションをチェックするとします。私のセレクター文字列には、5 ^ 6個のコンマ区切りの文字列が含まれている必要があり、各文字列には6つの用語が含まれています。各用語の平均が5文字で、5つ.の文字が区切られている場合、セレクターの全長は約546,875文字で、それぞれ35文字の長さの5^6文字になります。

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 に答える