jQueryを使用してクリック時に関数を切り替える方法?

jQuery を使用したクリック時の関数の切り替え

jQuery では、要素がクリックされたときに関数を切り替えるタスクは、別のメソッドで実行できます。

組み込み jQuery .toggle()

jQuery は、2 つのバージョンの .toggle() メソッドを提供します。質問で言及されている、可視性の切り替えに使用されるものは現在非推奨です。ただし、クリック時に関数を切り替えるために特別に設計された代替バージョンがあります。

$(selector).toggle(function1, function2);

このメソッドは 2 つの関数を引数として受け取り、クリックするたびに関数を切り替えます。

カスタム プラグイン

代わりに、より汎用性の高い実装を提供するカスタム プラグインを作成することもできます。 「clickToggle」と呼ばれるこのプラグインでは、複数の関数を割り当てることができ、あらゆるイベントに使用できます。

$.fn.clickToggle = function(func1, func2, ...) {
    var funcs = [func1, func2, ...];
    this.data('toggleclicked', 0);
    this.click(function() {
        var data = $(this).data();
        var tc = data.toggleclicked;
        $.proxy(funcs[tc], this)();
        data.toggleclicked = (tc + 1) % funcs.length;
    });
    return this;
};

このプラグインを使用するには、関数を引数として指定します:

$('#element').clickToggle(function1, function2);

実装の改善

提供されたコードは、パフォーマンスを向上させるためにさらに最適化できます:

$(function() {
    var clickCallbacks = [function1, function2];
    $('#element').click(function() {
        clickCallbacks[$(this).data('toggleclicked')++]();
    });
});

このアプローチでは、クリック ハンドラーのみを割り当てることで関数呼び出しの数が大幅に削減されます。 1 回だけ実行すると、実行時間が短縮されます。

以上がjQueryを使用してクリック時に関数を切り替える方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。