jQuery Изотоп не запускается

Question

Я не знаю, почему, но мой скрипт не будет работать, надеюсь, вы, ребята, можете мне помочь.

Fiddle

http://jsfiddle.net/etu4ce7s/2/

Вот мой код, который фильтрует коробки содержания:

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

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

    $('.controls').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'); 
    }); 
    }); 

}); 

Answer 1

Я имею дело с этим в течение последнего часа, но без толка ... Тем не менее, Я создал рабочую версию изотопа, возможно, это поможет вам.

// init Isotope 
 
var $grid = $('.grid').isotope({ 
 
    // options 
 
}); 
 
// filter items on button click 
 
$('.filter-button-group').on('click', 'button', function() { 
 
    var filterValue = $(this).attr('data-filter'); 
 
    $grid.isotope({ filter: filterValue }); 
 
});

<div class="button-group filter-button-group"> 
 
    <button data-filter="*">show all</button> 
 
    <button data-filter=".metal">metal</button> 
 
    <button data-filter=".transition">transition</button> 
 
    <button data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button> 
 
    <button data-filter=":not(.transition)">not transition</button> 
 
    <button data-filter=".metal:not(.transition)">metal but not transition</button> 
 
</div> 
 

 
<div class="grid"> 
 
    <div class="element-item transition metal">Item 1</div> 
 
    <div class="element-item post-transition metal">Item 2</div> 
 
    <div class="element-item alkali metal">Item 3</div> 
 
    <div class="element-item transition metal">Item 4</div> 
 
    <div class="element-item lanthanoid metal inner-transition">Item 5</div> 
 
    <div class="element-item halogen nonmetal">Item 6</div> 
 
    <div class="element-item alkaline-earth metal">Item 7</div> 
 
</div>

Fiddle http://jsfiddle.net/etu4ce7s/3/