jQueryを使用して複数のクリックで異なる関数を実行する方法?

クリックと切り替え: jQuery を使用したさまざまな関数の実行

開発者は、特定の要素がクリックされたときにコードのさまざまなブロックを実行する必要があることがよくあります。複数回。 jQuery は、.toggle() など、この要件に対処するための複数のソリューションを提供します。ただし、.toggle() は常に目的の機能を実現できるとは限りません。

1 つのアプローチは、jQuery の組み込み .toggle() メソッドを利用することです。ただし、jQuery 1.7 以降、このバージョンの .toggle() は非推奨となり、その後 jQuery 1.9 で削除されたことに注意してください。これは主に、複数の .toggle() メソッドが存在するためです。

代替手段を求める人のために、jQuery はこの目的のために特別に設計された簡潔で多用途のプラグインを提供します。

(function($) {
    $.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) % 2;
        });
        return this;
    };
}(jQuery));

これ.clickToggle() というプラグインには 2 つのパラメーターが必要です。1 回目と 2 回目のクリックで実行される関数です。現在のクリック数を追跡するために内部データ値を割り当てます。要素をクリックすると、このデータが取得され、適切な関数が呼び出されます。

プラグインを使用するには、目的の要素でプラグインを呼び出し、関連する関数を指定するだけです。

$('#test').clickToggle(function() {
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

In要約すると、jQuery には、要素のクリック時にさまざまな機能を切り替えるための複数のオプションが用意されています。 .toggle() が常に十分であるとは限りませんが、前述のプラグインは、カスタマイズ可能で効率的な、カスタマイズされたソリューションを提供します。

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