Комбинированный фильтр и сортировка изотопов jQuery - PullRequest
Новая
       1

Комбинированный фильтр и сортировка изотопов jQuery

1 голос
/ 05 августа 2011

Я впервые использую плагин 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, но стараюсь учиться по ходу дела, поэтому любая помощь будет принята с благодарностью.

Спасибо

Chris

1 Ответ

4 голосов
/ 23 августа 2011

Я обнаружил, что для реализации сортировки и фильтрации (без сбоев) мне нужно было сделать два запроса 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' });
...