Mixitup 3 过滤器加载

如何解决Mixitup 3 过滤器加载

我正在尝试在我的 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,.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,3 当我点击类别 4 的按钮时，只显示类别 4。

有人可以帮我吗？

谢谢

解决方法

我明白了：

这个：

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

必须设置为

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

工作正常！