时间戳

首页 > 解决方案 > Mixitup 3 过滤器加载

jquery - 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 个（按会话值）：

类别 1、.类别 2、.类别 3

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

但是，当我单击类别 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。

有人可以帮助我吗？

谢谢

标签： jqueryfilteringmixitup

解决方案

我知道了：

这个：

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

必须设置为

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

工作正常！

推荐阅读