1

我正在使用 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'}
});

我想要实现的是在单击with#description-category-1时显示它，并且在选择另一个过滤器时再次隐藏它。.filterdata-filter=".category-1"

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

4

1 回答 1

0

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

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

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

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



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

例如 ：

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

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

 if(state.activeFilter=="myDesiredFilter"){
     //do something\
 }
于 2016-02-13T18:40:33.643 回答