0

https://www.kunkalabs.com/mixitup/，我跟着介绍，更准确的说这段代码可以在这里测试。我也尝试在没有运气的情况下复制它。

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

链接到最小工作示例

$('#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
4

1 回答 1

1

我是 MixItUp 的作者。

看起来您的示例基于 MixItUp v2，这是 2014 年的一个旧 jQuery 插件。切换控件是在 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.kunkalalabs.com/mixitup )。

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

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

于 2018-10-14T10:05:15.123 回答