Question

我为Isotope插件制作了几个过滤器，目前我很难将它们组合成一个过滤器。我已经阅读了文档，但似乎无法让它工作。

到目前为止我的代码：

$( function() {
  // quick search regex
  var qsRegex;

  // init Isotope
  var $grid = $('.jobs').isotope({
    itemSelector: '.job',
    layoutMode: 'vertical',
    vertical: {
      horizontalAlignment: 0.5,
    },
    getSortData: {
      deadline: '.job_deadline',
      type: '.job_type',
    },
    filter: function() {
      return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
  });

  // free search
  var $quicksearch = $('.search').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
  }, 200 ) );

  // job type
  $('.type-filter').on( 'change', function() {
    var filterValue = this.value;
    $grid.isotope({ filter: filterValue });
  });

  // year level
  var $container = $('.jobs'),
  $checkboxes = $('#year_level input');

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
  });

  var $items = $container.children();

});

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  return function debounced() {
    if ( timeout ) {
      clearTimeout( timeout );
    }
    function delayed() {
      fn();
      timeout = null;
    }
    timeout = setTimeout( delayed, threshold || 50 );
  }
}

有人在这里解决了类似的问题吗？我将非常感谢所有帮助和提示。

Answer 1

检查这个Desandro的codepen http://codepen.io/desandro/pen/1f0c676d32473ccf8b6d053c07aa9ba6/ 您可以将过滤器与功能组合......

    $( function() {

  // filter functions
  var filterFns = {
    greaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    even: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) % 2 === 0;
    }
  };

  // store filter for each group
  var filters = {
    greaterThan50: 'greaterThan50'
  };

  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.color-shape',
    filter: function() {
      var isMatched = true;
      var $this = $(this);

      for ( var prop in filters ) {
        var filter = filters[ prop ];
        // use function if it matches
        filter = filterFns[ filter ] || filter;
        // test each filter
        if ( filter ) {
          isMatched = isMatched && $(this).is( filter );
        }
        // break if not matched
        if ( !isMatched ) {
          break;
        }
      }
      return isMatched;
    }
  });

  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // arrange, and use filter fn
    $container.isotope('arrange');
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});

Isotope.js - 组合过滤器

1 个答案: