jQuery的同位素添加自定義類和計數過濾項

Question

我怎麼能自定義類的同位素添加到這個jQuery的同位素過濾和計數經過濾項：

$(function(){ 
var $container = $('#wrap-planspiel'), 
     filters = {}; 

    $container.isotope({ 
     animationEngine : 'css', 
     itemSelector : '.hexblock' 
    }); 

    // filter buttons 
    $('select').change(function(){ 
    var $this = $(this); 

    // store filter value in object 
    // i.e. filters.color = 'red' 
    var group = $this.attr('data-filter-group'); 

    filters[ group ] = $this.find(':selected').attr('data-filter-value'); 
    // console.log($this.find(':selected')) 
    // convert object into array 
    var isoFilters = []; 
    for (var prop in filters) { 
     isoFilters.push(filters[ prop ]) 
    } 
    console.log(filters); 
    var selector = isoFilters.join(''); 
    $container.isotope({ filter: selector }); 
    return false; 
    }); 

     $('.filter a').click(function() { 
      var $this = $(this); 
      if ($this.hasClass('selected')) { 
     return; 
     } 

     var $optionSet = $this.parents('.option-set'); 
     // change selected class 
     $optionSet.find('.selected').removeClass('selected'); 
     $this.addClass('selected'); 
      var group = $this.parent().data('filter-group'); 
      filters[ group ] = $this.data('filter-value'); 
      var isoFilters = []; 
      for (var prop in filters) { 
       isoFilters.push(filters[ prop ]) 
      } 
      console.log(filters); 
      var selector = isoFilters.join(''); 
      $container.isotope({ filter: selector }); 
      return false; 
     });  

}); 

有來自desandro一個例子，但類仍然之後正在重置所有過濾器：http://jsfiddle.net/desandro/3nY9V/

Answer 1

好吧，抱歉地理解如此之慢，在Chrome的devtools現在看它。所以：

1. 在您的網頁（沙箱或小提琴）的第一次的負荷，顯示全部28個同位素物品;一個項目有例如「produkt-element flutlicht w-100w warmwhite isotope-item」類，但沒有元素具有「is-filtered」類，因爲沒有進行過濾
2. 然後，例如，Flutlicht在下拉菜單現在
3. ，該項目也有加入到先前的類
4. 那麼「被過濾的」級，一個從下拉菜單現在
5. 選擇ALLE Leuchtenarten ，頁面看起來像在1.但該項目仍然有「is-filtered」類

好了，說到不如一個驚喜，因爲現在你總是內過濾功能，因此所有的項目都確實過濾 - 但過濾爲ALLE Leuchtenarten和ALLE Lichtfarben和ALLE Leistungen ，這就是爲什麼所有28個項目都顯示爲就好像您的頁面剛剛第一次加載:)但是 - 爲什麼要擔心？你明白我的意思嗎？

發現了另一個問題：如果有人做了上述操作，當您返回顯示所有28個項目時，您有時會在箱子中的物品之間出現間隙。您需要致電reLayout某處，否則您必須依靠查看器來調整窗口大小以踢佈局填充機制。

Answer 2

您可以簡單地計算經過濾項，像這樣http://jsfiddle.net/3nY9V/1/

Answer 3

剛發現這個確切的例子（計數可見項）在the isotope docs中給出。

$container.isotope('on', 'layoutComplete', 
    function(isoInstance, laidOutItems) { 
    console.log('Isotope layout completed on ' + 
     laidOutItems.length + ' items'); 
    } 
);