带组合过滤器的同位素隐藏显示

如何解决带组合过滤器的同位素隐藏显示

我将 Isotope 与 hideReveal 结合使用，以便在网格中显示/隐藏过滤的项目。

我想集成 combination 选项，以便过滤器可以累积。 我找到了很多关于此的主题，但没有一个包含 hideReveal 方法。

这是我目前的代码：

$.fn.hideReveal = function( options ) {
  options = $.extend({
    filter: '*',hiddenStyle: { opacity: 0.2 },visibleStyle: { opacity: 1 },},options );
  this.each( function() {
    var $items = $(this).children();
    var $visible = $items.filter( options.filter );
    var $hidden = $items.not( options.filter );
    // reveal visible
    $visible.animate( options.visibleStyle );
    // hide hidden
    $hidden.animate( options.hiddenStyle );
  });
};

$( function() {

  var $container = $('.isotope');
  
  // filter functions
  var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number,10 ) > 50;
    },// show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };
  // bind filter button click
  $('#filters').on( 'click','button',function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.hideReveal({ filter: filterValue });
  });

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

是否有人遇到过这种情况并愿意分享解决方案或建议？ 非常感谢