mixitup根據篩選器選擇顯示div mixEnd

Question

我正在使用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"被點擊時#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方法）
for more information see

例如：

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

state.activeFilter表示有源濾波器串，對象或功能。
與如果回調函數語句，你可以得到過濾器名和....

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