Question

我可以使用一些帮助来配置Isotope图库插件！

我尝试仅使用一个过滤器配置插件，它完美无缺！但是，现在我很勇敢，并试图在画廊中使用两个过滤器，但我还没有成功，画廊现在也没有用。虽然下面的代码看起来势不可挡，但我复制了＆amp;从Isotope doc网站粘贴。

我有一种感觉我错过了一个设置或某些东西......来自doc网站的设置变得复杂，尤其是在使用第二个过滤器时。我希望有经验配置Isotope插件的人可以查看下面的代码（或在CodePen上查看），看看我哪里出错......？

JS：

// init Isotope
var $grid = $('.grid').isotope();

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

$demo.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 );
  $grid.isotope({ filter: filterValue });
});

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

// filter 
$grid.isotope({ filter: '.ignite-thought' });

// filter 
$grid.isotope({ filter: '.drive-results' });

// filter 
$grid.isotope({ filter: '.focus-on-people' });

// filter 
$grid.isotope({ filter: '.be-your-best-self' });

// filter 
$grid.isotope({ filter: '.monday' });

// filter 
$grid.isotope({ filter: '.tuesday' });

// filter 
$grid.isotope({ filter: '.wednesday' });

// filter 
$grid.isotope({ filter: '.thursday' });

// filter 
$grid.isotope({ filter: '.friday' });

// show all items
$grid.isotope({ filter: '*' });

查看CodePen。

Answer 1

你几乎就在那里。两个问题。一个是，你没有定义你的变量$demo和两个，你有你的过滤点击功能，目标是你的按钮不存在的类。

定义$ demo：

 var $demo = $('.container';

为您的过滤器按钮添加您的定位类：

       <div class="button-group" data-filter-group="color">
        <button class="button" data-filter="">any</button>
         <button class="button" data-filter=".monday">Monday</button>
         ...

这是一个更新的Codepen（我为按钮添加了一些CSS）

JQuery同位素 - 组合滤波器

1 个答案: