jQueryを使用して要素クリックで2つの関数を切り替える方法?

jQuery の 2 つの関数間のクリック切り替え

要素が 1 回クリックされたか複数回クリックされたかに基づいて、異なるアクションを実行する必要がありますか? jQuery を使用してこれを実現する方法は次のとおりです。

組み込み .toggle() メソッド

jQuery には 2 つの .toggle() メソッドがあります:

• 1 つのメソッドは、要素の表示/非表示を切り替えます。
• A toggle(func1, func2) と呼ばれる 非推奨 メソッド (jQuery 1.9 で削除) は、要素のクリック時に 2 つの関数間の切り替えを効率的に処理します。

カスタム プラグインの実装

この機能はプラグインとして次のように実装できます。

(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));

使用法

プラグインを使用すると、以下を呼び出すことができます:

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

具体的な例

元の質問に基づいて、次のように目的の機能を実現できます。以下:

var count = 0;
$("#time").clickToggle(
    function() {
        $(this).animate({
            width: "260px"
        }, 1500);
    },
    function() {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
);

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