JavaScript同位素 - 如何智能地創建多組過濾器以在一個容器上一起工作？

可以說我想過濾顏色（紅色，黃色或藍色）和尺寸（小，中，大）和材質（羊毛，棉花，絲綢）。我將有三組複選框。如果用戶選中「紅色」複選框和「中等」複選框，我希望同位素顯示紅色和中等項目。到目前爲止，沒有問題。但是，如果用戶同時檢查紅色和黃色複選框以及中型和大型複選框以及羊毛和絲綢複選框，該怎麼辦？現在我想讓Isotope顯示((medium OR large) AND (red OR yellow) AND (wool OR silk))的項目。JavaScript同位素 - 如何智能地創建多組過濾器以在一個容器上一起工作？

構建一個適合這個場景的jQuery選擇器字符串看起來很複雜，特別是如果有幾十個組，每個組包含數十個選項。

使用jQuery孤獨，我可以做到以下幾點：

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

但是，如果我有建全的選擇，以便只有一次通過它完全形成同位素，我必須做的：

`.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逗號分隔的字符串，每個字符串包含6個詞。如果每個字詞平均爲5個字符，用五個.將它們分開，那麼我將有5^6個字符串，每個字符長度爲35個字符，總長度大約爲546,875個字符。

同位素提供了一個更好的方法來解決這個問題嗎？

來源

2012-11-12 jononomo

不幸的是...不在這個階段。我也有這個問題 - 看看我的解決方案在這裏http://apn.co.nz/audience/ - 它變得非常緩慢，如果你選擇了很多選項... 糟糕，我一定忘記了刪除控制檯日誌查詢字符串！但這對你有好處，所以你可以看到他們有多大！ – ahren

此外，解決方案是在這個問題後發現我發佈在這裏：http://stackoverflow.com/questions/12558661/creating-filters-from-selections-isotope – ahren

我能夠得到它使用解決方案完美由Esailija提供。 – jononomo

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-12 23:19:49 Esailija

該解決方案的工作原理和輝煌。我印象深刻。 – jononomo

JavaScript同位素 - 如何智能地創建多組過濾器以在一個容器上一起工作？

回答

相關問題