1

望ましい動作

mixItUpフィルター機能の実行が終了した 後に、カスタム関数を呼び出したいと考えています。

MixItUpドロップダウンから値を選択すると呼び出されます。

現在の動作

機能のデモンストレーションとテストを行うために、私は を呼び出しalert()ていmixEndます。

値を選択した後に警告ボックスが表示される回数は、後続の選択ごとに増加します。つまり、最初の選択後は 1 回表示され、2 回目の選択後は 2 回表示されます。

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

});

jsフィドル

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

再現する手順

  • jsFiddle にアクセスしてください。
  • ドロップダウンからエリアを選択します (1 つのアラートが表示されます)。
  • ドロップダウンから別のエリアを選択します (2 つのアラートが表示されます)。

質問

以下に示すように、複数の関数とコールバックを適用する方法はいくつかあり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

ここに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

});

jsフィドル

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

于 2014-10-30T15:33:24.047 に答える