jQuery将添加自定义类并统计筛选项

如何将自定义类添加到此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提供了一个示例，但重置所有过滤器后，该类仍然存在：

您可以简单地像这样计算过滤的项目，好吧，很抱歉理解得太慢，现在在Chrome的devtools中查看它。因此：

第一次加载页面（沙盒或小提琴）时，所有28个同位素项目都会显示出来；例如，项目具有“produkt元素flutlicht w-100w温白同位素项目”类别，但没有元素具有“已过滤”类别，因为尚未进行过滤

然后，在下拉菜单中选择Flutlicht

现在，该项还将“IsFiltered”类添加到以前的类中

然后，从下拉菜单中选择Alle Leuchten Arten

现在，页面看起来像在1中。但是该项仍然有“is filtered”类

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

---

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

刚刚发现，中给出了这个确切的示例（计算可见项）

---

然后呢？我提供的过滤项目计数示例有用吗？是的。非常感谢。我还需要为每个选定的项目添加自定义类。好吧，既然您正在计算的隐藏项目已经应用了类。同位素隐藏，您就不能使用该属性来定位它们吗？我的意思是-是否真的有必要（对于您最终想要实现的目标，我当然不知道）将自定义类添加到已被.isotox隐藏类“标记”的项中？对于我正在处理的项目，需要过滤的项获得一个额外的自定义类。像在我的示例中一样，添加了一个自定义类“已筛选”，但在重置筛选后，类“已筛选”仍然保留，这是我的问题。感谢您的耐心。重置筛选（意味着未选中任何复选框）后，如果您使用$items=$（'.item'）将自定义类存储在jQuery对象中，则只需从所有项中.remove（）即可；如图所示，我找到了一个解决方案：这正是我所需要的。也许对其他人是有帮助的。我不知道，嗯，我是“Löcher”祖维尔梅登，我也不知道，也不知道我有一个同位素脚本，所以我可以用它来制作动画。

$container.isotope( 'on', 'layoutComplete',
  function( isoInstance, laidOutItems ) {
    console.log( 'Isotope layout completed on ' +
      laidOutItems.length + ' items' );
  }
);