jQuery Isotope 添加自定义类并计算过滤项

Question

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

    $(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/

Answer 1

好的，抱歉理解这么慢，现在在 Chrome 的开发工具中查看。所以:

1. 首次加载页面(沙盒或 fiddle )时，会显示所有 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 和 < em>Alle Lichtfarben 和 Alle Leistungen，这就是为什么所有 28 个项目都显示就像您的页面刚刚第一次加载:) 但是 - 为什么担心这个吗？你明白我的意思吗？

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