jQuery Isotope 不会运行

Question

我不知道为什么，但是我的脚本不起作用，希望你们能帮助我。

小提琴

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>

小提琴http://jsfiddle.net/etu4ce7s/3/