1

期望的行为

我想在mixItUp执行完过滤器功能后调用自定义函数。

MixItUp从下拉列表中选择一个值时会引发。

当前行为

为了演示和测试我呼吁alert()的功能mixEnd。

选择一个值后警报框显示的次数在每次后续选择时都会增加，即在第一次选择后显示一次，在第二次选择后显示两次。

jQuery 

//define function
function initFilters() {
    $('#container').mixItUp({
        layout: {
            display: 'block'
        },
        animation: {
            duration: 1000,
            effects: 'translateZ(-360px) stagger(110ms) fade',
            easing: 'ease'
        }
    });
}

// call function
initFilters();

// define .on behavior
$('#area_filter, #rating_filter').on('change', function () {
    $('#container').mixItUp('filter', this.value);

    // do something on mixEnd
    $('#container').on('mixEnd', function(e, state){
        alert('MixItUp finished!');
    });

});

jsFiddle

http://jsfiddle.net/rwone/e3c6x29f/

重现步骤

  • 访问 jsFiddle。
  • 从下拉列表中选择一个区域（将显示一个警报）。
  • 从下拉列表中选择另一个区域（将显示两个警报）。

问题

有许多方法可以应用多个函数和回调，MixItUp如下所示。

因此，我的问题是：

  • 如何解决增量显示的警报框的不良行为？

  • 以下哪种方法是实现所需行为的最优雅方法（因为我怀疑我当前的方法会导致问题）？

选项

多混合（https://mixitup.kunkalabs.com/docs/#method-multiMix）

例子：

$('#container').mixItUp('multiMix', {
    filter: '.category-1, .category-2',
    sort: 'name:asc',
    changeLayout: {
        containerClass: 'flex'
    }
});

使用 onMixEnd 回调（https://mixitup.kunkalabs.com/docs/#prop-callbacks-onMixEnd）

$('#container').mixItUp({
    callbacks: {
        onMixEnd: function(state){
            alert('Operation ended');
        }
    }
});

还有一个这种方法的例子（我目前正在使用）：

$('#container').on('mixEnd', function(e, state){
    alert('MixItUp finished!');
});
4

1 回答 1

1

好吧，这是一种解决方案，但仍然不确定是否最优雅，但它解决了不希望的多重触发行为。

我所要做的就是将.on('mixEnd', function(e, state)下拉选择区域移出，如下所示：

//define function
function initFilters() {
    $('#container').mixItUp({
    layout: {
        display: 'block'
    },
    animation: {
        duration: 1000,
        effects: 'translateZ(-360px) stagger(110ms) fade',
        easing: 'ease'
    }
    });
}

// do something on mixEnd <-- added here
$('#container').on('mixEnd', function(e, state){
alert('MixItUp finished!');
});

// call function
initFilters();

// define .on behavior
$('#area_filter, #rating_filter').on('change', function () {
    $('#container').mixItUp('filter', this.value);

// <-- removed from here

});

jsFiddle

http://jsfiddle.net/rwone/e3c6x29f/8/

于 2014-10-30T15:33:24.047 回答