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' });

jQuery同位素组合滤波器＆amp;分类

1 个答案: