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

Linda Hamilton
リリース: 2024-11-14 15:41:02
オリジナル
386 人が閲覧しました

How to Execute Different Functions on Multiple Clicks with 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート