mixitup 根据 mixEnd 之后的过滤器选择显示 div答案

【问题标题】：mixitup show div based on filter selection after mixEndmixitup 根据 mixEnd 之后的过滤器选择显示 div
【发布时间】：2015-11-10 12:52:58
【问题描述】：

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

我知道有callback functions 用于我想做的事情，但我不知道如何使用它。

代码如下：

<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'}
});

我想要实现的是，在.filter与data-filter=".category-1"的data-filter=".category-1" #description-category-1时，它会在选择另一个过滤器时再次隐藏。

如何在 MixItUp 中获得选定的过滤器？以及如何构造一个执行上述操作的回调函数？

【问题讨论】：

标签： javascript jquery callback mixitup

【解决方案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 方法获得）
for more information see

例如：

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

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

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

【讨论】：