2

如何将自定义类添加到此 jQuery Isotope 过滤并计算同位素中过滤的项目：

    $(function(){
var $container = $('#wrap-planspiel'),
      filters = {};

  $container.isotope({
        animationEngine : 'css',
        itemSelector : '.hexblock'
  });

  // filter buttons
  $('select').change(function(){
    var $this = $(this);

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');

    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    console.log(filters);
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
  });

      $('.filter a').click(function() {
          var $this = $(this);
          if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
          var group = $this.parent().data('filter-group');
          filters[ group ] = $this.data('filter-value');
          var isoFilters = [];
            for ( var prop in filters ) {
              isoFilters.push( filters[ prop ] )
            }
            console.log(filters);
            var selector = isoFilters.join('');
            $container.isotope({ filter: selector });
            return false;
      });      

});

有一个来自 desandro 的示例，但在重置所有过滤器后该类仍然存在：http: //jsfiddle.net/desandro/3nY9V/

4

3 回答 3

2

您可以像这样简单地计算过滤后的项目http://jsfiddle.net/3nY9V/1/

于 2012-07-27T20:14:33.707 回答
2

好的，很抱歉理解这么慢，现在在 Chrome 的 devtools 中查看。所以：

  1. 第一次加载您的页面（沙盒或小提琴）时，会显示所有 28 个同位素项目；例如，一个项目具有“produkt-element flutlicht w-100w warmwhite isotope-item”类，但没有元素具有“is-filtered”类，因为尚未进行过滤
  2. 然后，例如在下拉菜单中选择Flutlicht
  3. 现在，该项目还在之前的类中添加了“is-filtered”类
  4. 然后，从下拉菜单中选择Alle Leuchtenarten
  5. 现在，页面看起来像1.但该项目仍然具有“is-filtered”类

好吧，这并不奇怪，因为现在您总是在过滤器功能中，所以所有项目确实都被过滤了 - 但过滤了Alle Leuchtenarten和Alle Lichtfarben和Alle Leistungen，这就是为什么所有 28 个项目都显示为好像您的页面有第一次加载 :) 但是 - 为什么要担心呢？你明白我的意思吗？

发现另一个问题：当您执行上述操作时，有时在返回显示所有 28 个项目时，您的盒子中的项目之间会出现间隙。您需要在某处调用 reLayout，或者您必须依靠查看器来调整窗口大小以启动布局填充机制。

于 2012-08-03T09:06:42.320 回答
2

刚刚发现同位素文档中给出了这个确切的例子（计算可见项目） 。

$container.isotope( 'on', 'layoutComplete',
  function( isoInstance, laidOutItems ) {
    console.log( 'Isotope layout completed on ' +
      laidOutItems.length + ' items' );
  }
);
于 2015-02-28T07:11:48.363 回答