1

私は初めてjQueryIsotopeプラグインを使用していて、結果のいくつかが本当に気に入っていますが、「組み合わせフィルター」を「並べ替え」オプションで機能させるのに少し問題があります。

単一のフィルターと並べ替えを一緒に使用しましたが、並べ替え関数を組み合わせフィルターで機能させることができません。

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

<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の専門家ではありませんが、学習しながら学習しようとしているので、助けていただければ幸いです。

ありがとう

クリス

4

1 に答える 1

5

並べ替えとフィルタリングの両方を（グリッチなしで）実装するには、2つのjQueryリクエストを作成する必要があることがわかりました。1つは並べ替え用、もう1つはフィルタリング用です...

$('#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' });
于 2011-08-23T12:36:28.897 に答える