jQuery Isotope Combinationフィルタ＆ソート

Question

私はjQuery Isotopeプラグインを初めて使用していますが、実際にはいくつかの結果が好きですが、 'Sort Filter'を使用するために 'Combination Filter'オプション。

私は1つのフィルタとソートを併用していますが、ソート機能を使用してコンビネーションフィルタを使用することはできません。

私のスクリプトは、次のようになります

<script type="text/javascript"> 
    $(function(){ 

    var $container = $('#container'), 
     filters = {}; 

    $container.isotope({ 
     itemSelector : '.element', 

     getSortData : { 
      name : function ($elem) { 
      return $elem.find('.name').text(); 
      } 
     } 
     }); 

    // filter buttons 
    $('.filter a').click(function(){ 
     var $this = $(this); 
     // don't proceed if already selected 
     if ($this.hasClass('selected')) { 
     return; 
     } 

     var $optionSet = $this.parents('.option-set'); 
     // change selected class 
     $optionSet.find('.selected').removeClass('selected'); 
     $this.addClass('selected'); 

     // store filter value in object 
     // i.e. filters.color = 'red' 
     var group = $optionSet.attr('data-filter-group'); 
     filters[ group ] = $this.attr('data-filter-value'); 
     // convert object into array 
     var isoFilters = []; 
     for (var prop in filters) { 
     isoFilters.push(filters[ prop ]) 
     } 
     var selector = isoFilters.join(''); 
     $container.isotope({ filter: selector }); 

     return false; 
    }); 

    var $sortBy = $('#sort-by'); 
    $('#shuffle a').click(function(){ 
     $container.isotope('shuffle'); 
     $sortBy.find('.selected').removeClass('selected'); 
     $sortBy.find('[data-option-value="random"]').addClass('selected'); 
     return false; 
    }); 

    }); 
</script> 

そして、私の並べ替えのコードは、この、まさに私は、単一のフィルタを使用していたソートコードです

<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> 
     <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>Course Date</a></li> 
     <li><a href="#sortBy=name" data-option-value="name">Course Name</a></li> 
     <li><a href="#sortBy=random" data-option-value="random">Random</a></li> 
</ul> 

のように見えます。誰かが私を助けたり、正しい方向に私を向けることができますか？私はjQueryの専門家ではありませんが、私が行っていくうちに勉強しようとしていますので、どんな助けでも大歓迎です。

おかげ

クリス

Answer 1

は私が

...（グリッチなし）の両方のソートやフィルタリングを実装するために、私は2つのjQueryのリクエスト、フィルタリングのために並べ替えた後、別のものを作るために必要なことがわかりました

$('#articles').isotope({ 
    layoutMode: 'masonry', 
    masonry: { 
     columnWidth: 164 // size + margin, 
    }, 
    getSortData: { 
     recent: function ($e) { 
      return parseInt($e.find('.recent').text(), 10); 
     }, 
     liked: function ($e) { 
      return parseInt($e.find('.liked').text(), 10); 
     }, 
     discussed: function ($e) { 
      return parseInt($e.find('.discussed').text(), 10); 
     } 
    }, 
    sortBy: 'liked', 
    sortAscending: false, 
    itemSelector: 'article', 
    animationEngine: 'jquery' 
}); 

$('#articles').isotope({ filter: '.photos' });