mixitup在mixEnd之后显示基于过滤器选择的div

Question

我正在使用jQuery插件MixItUp来获得可过滤的产品网格。

我知道我想做的事情有回调函数，但我不知道如何使用它

代码如下：

<ul id="product-filters" class="list-filter list-inline">
    <li class="filter active" data-filter="all"><span>All</span></li>
    <li class="filter" data-filter=".category-1" data-filtername="category-1"><span>Category 1</span></li>
    <li class="filter" data-filter=".category-2" data-filtername="category-2"><span>Category 2</span></li>
</ul>
<div id="description-category-1" class="term-description hidden">
    <p>Term description for category 1 here...</p>
</div>
<div id="description-category-2" class="term-description hidden">
    <p>Term description for category 2 here...</p>
</div>
<div id="grid">
<!-- Products .mix here... -->
</div>

这就是js:

$('#grid').mixItUp({
    animation: {animateResizeContainer: true, animateChangeLayout: true},
    selectors: {target: '.mix', filter: '.filter'}
});

我想要实现的是，当点击带有data-filter=".category-1"的.filter时，#description-category-1会显示出来，而当选择另一个过滤器时，它会再次隐藏起来。

如何在MixItUp中获得选定的筛选器？你是如何构造一个回调函数来实现上述功能的？

Answer 1

要使用回调，您可以执行以下操作：

    $('#grid').mixItUp({
      callbacks: {
         onMixLoad: function (state) {
            alert('MixItUp ready!');
         },
         onMixStart: function (state, futureState) {
            alert('Animation starting');
         },
         onMixEnd: function (state) {
            alert('Operation ended');
         },
         onMixFail: function(state){
            alert('No elements found matching '+state.activeFilter);
         },
         onMixBusy: function (state) {
            alert('MixItUp busy');
         }
      }
   });

回调必须写成对象callbacks: {....}。或者，您可以使用jQuery的.on()方法绑定事件：

$('#grid').on('mixEnd', function(e, state){
    //do something 
});

所有回调函数的第一个参数包含有关当前筛选器和排序状态的有用信息。（也可通过getState API方法获得）
有关更多信息，请参阅

例如：

 $('#grid').mixItUp({
    callbacks: {
        onMixStart: function (state, futureState) {
            console.log(state.activeFilter)
        }
    }
});

state.activeFilter表示活动过滤器字符串、对象或函数
使用回调函数中的if语句，可以获得过滤器名称和。。。。

 if(state.activeFilter=="myDesiredFilter"){
     //do something
 }