https://www.kunkalabs.com/mixitup/ , 我关注了 introduction ,更准确地说 this code可以测试here .我也试过复制 this没有运气。
尽管过滤器按钮按预期工作,但切换按钮没有响应。
最低工作链接 example
$('#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 插件。切换控件是在 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/
关于javascript - (mixItUp) 切换按钮没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52707617/