Question

我遇到Isotope插件（jQuery）的问题。我想用已过滤的项目初始化插件。我看过一些关于这个主题的帖子，但答案并不清楚。

这是我的代码：

<div class="filters">
  <div class="ui-group">
    <div class="button-group js-radio-button-group" data-filter-group="gender">
      <button class="button is-checked" data-filter="">BOTH</button>
      <button class="button" data-filter=".female">FEMALE</button>
      <button class="button" data-filter=".male">MALE</button>
    </div>
  </div>
</div>

那是我的物品：

<div class="grid">
  <div class="colar-shape female">1</div>
  <div class="colar-shape male">2</div>
  <div class="colar-shape female">3</div>
  <div class="colar-shape male">4</div>
  <div class="colar-shape female">5</div>
</div>

最后，JS中的初始化代码：

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

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

那么，如何在加载页面时加载div 1,3和5？

非常感谢！

Answer 1

这应该有效：

 // init Isotope
 var $grid = $('.grid').isotope({
 itemSelector: '.color-shape',
 layoutMode: 'fitRows',
 filter: '.female'
 });

在Isotope中初始化已过滤的项目

1 个答案: