Mixitup 3 过滤器加载

Question

我正在尝试在我的 web 应用程序中使用 mixitup 多重过滤器。到目前为止一切正常。但是在加载时设置特定过滤器并在之后添加过滤器时遇到了问题。

例如：我在带有复选框的字段集中有 4 个类别可供选择。

<fieldset data-filter-group="categories">
 <h5 class="text-center mt-3">Kategorien</h5>
  <div class="row mb-2">
   <input class="saveFilter categories" type="checkbox" name="options" value=".category1">Kategorie 1
   <input class="saveFilter categories" type="checkbox" name="options" value=".category2">Kategorie 2
   <input class="saveFilter categories" type="checkbox" name="options" value=".category3">Kategorie 3
   <input class="saveFilter categories" type="checkbox" name="options" value=".category4">Kategorie 4
 </div>
</fieldset>

默认情况下，页面加载时应显示 4 个中的 3 个（按会话值）：

category1,.category2,.category3

这些类别默认过滤并正确显示，到目前为止一切顺利。

但是当我单击类别 4 的按钮时，我希望除了 3 个预加载的按钮之外还添加它。但它不起作用，因为现在只会显示类别 4。

这是我目前的代码（没有会话字符串，预先过滤的类别是硬编码的）：

$(document).ready(function() {

var containerEl = document.querySelector('.mixit');
var mixer = mixitup(containerEl, {

    multifilter: {
        enable: true
    },
    animation: {
        enable: false, // temporarily disable animations during load phase
        effects: 'fade translateZ(-100px)'
    }
});

// Set a load selector for filter group you wish to set an initial value for
// mixer.setFilterGroupSelectors('categories',  localStorage.getItem("categories"));

mixer.setFilterGroupSelectors('categories', '.category1,.category2,.category3');

// Tell MixItUp to re-filter based on the new values
mixer.parseFilterGroups();

// Re-enable animations
mixer.configure({
    animation: {
        enable: true
    }
});

});

总结：

所需功能：

默认加载类别 1,2,3 当我单击类别 4 的按钮时，我想显示类别 1、2、3 和 4

实际发生的情况：

默认加载类别 1,2,3 当我点击类别 4 的按钮时，只显示类别 4。

有人可以帮帮我吗？

谢谢

Answer 1

我明白了：

这个：

mixer.setFilterGroupSelectors('categories', '.category1,.category2,.category3');

必须设置为

mixer.setFilterGroupSelectors('categories', ['.category1', '.category2', '.category3']);

工作正常！