Пытается вставить несколько значений в массив (изотоп)

Question

Я использую Изотоп, чтобы функционировать как категориальный организатор связанного контента в причудливой компоновке. Я пытаюсь нажать несколько значений в массив, чтобы отобразить все элементы, затронутые фильтрами. Конечный результат, однако, показывает только последний элемент в массиве, а не сумму. Первоначально я подталкивал все свои значения в строку, а затем объявлял x в качестве конечного результата. Я понимаю, что это не способ сделать это, и с тех пор изменил его. Вместо строки я вдаваюсь в массив и надеюсь присоединиться к каждому значению, чтобы они все отображались. Тем не менее, я все еще получаю не что иное, как последнее выбранное значение. JS, как он стоит ниже.

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

    $('.filters').on('click', '.button', function() { 
    var filters = []; 
    // var filters = ''; 
    var selected = $(this).data('selected'); 
    var group = $(this).data('group'); 
    var currentFilter = $(this).data('filter'); 

    // toggle function along with having multiple selectors 
    if(selected == "0") { 
     filters.push($(this).data('filter')); 
     filters = filters.join(', '); 
     // filters = $(this).data('filter'); 
     $(this).data('selected', "1"); 
     $(this).addClass('is-checked') 
    } 
    else { 
     $(this).data('selected', "0"); 
     $(this).removeClass('is-checked') 
    } 

    // set filter for Isotope 
    $grid.isotope({ 
     filter: filters 
    }); 

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

Я также создал codepen для махинаций. Спасибо за любые предложения, которые приходят. Даже указывая на документацию или учебники, которые я, возможно, пропустил, было бы большой помощью. Пока я изучаю этот jsfiddle, который делает то, что я снимаю, чтобы посмотреть, как я могу изменить свой код, чтобы лучше соответствовать тому, что здесь происходит.

Answer 1

На прошлой неделе я также провожу время с этим. :) К счастью, я нашел кодек Desandro http://codepen.io/desandro/pen/owAyG/ Надеюсь, что это поможет.

$(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; 
    } 
    }; 

    // 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; 
    } 
    }); 

    // 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'); 
    // 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'); 
    }); 
    }); 

}); 

Answer 2

Это решение, с которым я столкнулся.

Я придумал отдельное решение, но это отличная ручка. Хотелось бы, чтобы я видел это раньше.

$(document).ready(function() { 
// init Isotope 
var $grid = $('.grid').isotope({ 
    itemSelector: '.element-item', 
    layoutMode: 'fitRows', 
    fitRows: { 
    gutter: 27 
    } 
}); 

// store filter for each group 
var filters = []; 

$('.filters').on('click', '.button', function() { 

    var filterstring = ''; 
    var selected = $(this).data('selected'); 
    var currentFilter = $(this).data('filter'); 


    // toggle function along with having multiple selectors 
    if (selected == "0") { 
    filters.push(currentFilter); 
    $(this).data('selected', "1"); 
    $(this).addClass('is-checked') 
    } else { 
    $(this).data('selected', "0") 
    $(this).removeClass('is-checked') 

    var filtername = $(this).data('filter') 
    var i = filters.indexOf(filtername) 
    filters.splice(i, 1) 
    } 
    filterstring = filters.join(', '); 
    // set filter for Isotope 
    $grid.isotope({ 
     filter: filters.join("") 
    }); 
    }); 
});