如何解决如何使同位素组合过滤器代替单个过滤器?
对于此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 举报,一经查实,本站将立刻删除。