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

我想要实现的是，#description-category-1点击.filter时会显示data-filter=".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语句在回调函数中，您可以获取过滤器名称和....

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

mixitup在mixEnd

1 个答案: