jQuery 同位素组合过滤和排序

Question

我第一次使用 jQuery Isotope 插件并且非常喜欢一些结果，但是我在尝试让“组合过滤器”与“排序”选项一起工作时遇到了一些问题。

我有一个过滤器和排序一起工作，但是我无法让排序功能与我的组合过滤器一起使用。

我的脚本看起来像这样，

<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

我发现为了实现排序和过滤（没有故障），我需要发出两个 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' });