如何使同位素组合过滤器代替单个过滤器？

问题描述

对于此codepen，我希望当您单击“颜色”滤镜时，它将过滤颜色，但是当您单击“大小”滤镜时，颜色滤镜将重置（也停止突出显示它）然后仅过滤选定的尺寸。单击“形状”时也是如此。

这就像它们不再是组合过滤器，而是单个过滤器一样。

我可以对此代码进行哪些更改以使其做到这一点？

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape'
});

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

$('.filters').on( 'click','.button',function( event ) {
  var $button = $( event.currentTarget );
  // get group key
  var $buttonGroup = $button.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $button.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i,buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click','button',function( event ) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = $( event.currentTarget );
    $button.addClass('is-checked');
  });
});
  
// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）