https://www.kunkalabs.com/mixitup/,我遵循了introduction,更确切地说是this code,可以对其进行测试。我也尝试过复制here而没有运气。

尽管过滤器按钮按预期工作,但切换按钮没有响应。



链接到最低工作this



$('#mix-wrapper').mixItUp({
    load: {
        sort: 'order:desc'
    },
    selectors: {
        filter: '.filter-btn',
        toggle: '.mix-btn'
    },
    callbacks: {
        onMixFail: function (state) {
            alert('No elements found matching ' + state.activeFilter);
        },
        onMixEnd: function (state) {
            console.log(state.activeFilter);
        }
    }
});


.mix {
  display: none;
}


<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div
 button(class="filter-btn" data-filter=".nodejs") Filter nodejs
 button(class="filter-btn" data-filter=".example") Filter example
 button(class="filter-btn" data-filter="all") show all
 button(class="filter-btn" data-filter="none") hide all
div
 button(type="button" class="mix-btn" data-toggle=".nodejs") .nodejs TOGGLE BUT
 button(type="button" class="mix-btn" data-toggle=".example") .example TOGGLE BUT

 ul#mix-wrapper
  li.mix.nodejs
   div(style="width: 18rem;") nodejs 1
  li.mix.nodejs
   div(style="width: 18rem;") nodejs 12
  li.mix.example
   div(style="width: 18rem;") example1
  li.mix.example
   div(style="width: 18rem;") example12
  li.mix
   div(style="width: 18rem;") testing
  li.mix
   div(style="width: 18rem;") testing

最佳答案

我是MixItUp的作者。

您的示例似乎基于MixItUp v2,它是2014年的旧jQuery插件。Toggle控件是v3引入的,v3于2016年发布,是最新的主要版本。 MixItUp网站上的所有文档均适用于v3。本质上,您正在尝试将v2库与v3 API的某些部分结合在一起,这将导致各种错误或缺少功能。

首先,您可能要查看v2-v3迁移指南以使您开始使用v3,并确保从代码中删除对v2 API的任何使用:

https://www.kunkalabs.com/mixitup/migration-guide/

其次,查看标题为“使用MixItUp过滤”的教程。此处广泛记录了切换控件和相关概念:

https://www.kunkalabs.com/tutorials/filtering-with-mixitup/

最后,MixItUp 3包含大量演示,可帮助您开始使用任何功能(http://demos.kunkalabs.com/mixitup)。

有两个切换控件演示,它们演示了“ AND”和“ OR”控制逻辑之间的区别,希望它们对您有用:

https://demos.kunkalabs.com/mixitup/toggle-filtering-or-logic/
https://demos.kunkalabs.com/mixitup/toggle-filtering-and-logic/

10-06 11:43