同位素Metafizzy过滤

Question

根据http://jsfiddle.net/fu3knn67/4/

解决

这是一个关于组合来自isotope.metafizzy.co的过滤器http://codepen.io/desandro/pen/JEojz的标准演示

我对JS知之甚少，所以这可能是一个愚蠢的问题。

我需要能够组合数据过滤器组中的过滤器。 （类似于复选框）示例：能够选择红色和黄色，然后选择小，宽和高。

此演示清除了之前的过滤器，只能选择一个过滤器。

请查看codepen演示以获取工作示例。

HTML

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

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

    $('.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');
        // 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() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $( this ).addClass('is-checked');
        });
    });

});

// flatten object by concatting values
function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}

JS

|