5

これはばかげた質問かもしれませんが、私はそれを正しく理解することができません。ボタンの機能は通常のJavaScriptでは変更できますが、jQueryでは変更できません。非常にシンプルなテキストサイズ変更ボタンを目指しています。このボタンには2つの異なる機能が必要です。テキストを大きくしてクリック関数を他の関数に変更する関数と、テキストを小さくしてクリック関数を最初の関数に再度変更する関数です。同じボタンがテキストシックスの拡大と縮小の両方に使用されるので、これが機能する必要があります。私は現在学校のプロジェクトに取り組んでおり、この割り当てにはjQuery /jQueryUIのみを使用する必要があります。

通常のJavaScriptでは、次のようになります。

var button = document.getElementById('click-button');
button.onclick = firstClick;

function firstClick (){ 
    button.onclick=secondClick;
}

function secondClick(){ 
    button.onclick=firstClick;
}

jQueryで同じことを実現するにはどうすればよいですか？

4

4 に答える 4

11

以下のコードのようなものが機能します。

$("#click-button").on('click', firstClick)

function firstClick() {
    alert("First Clicked");
    $("#click-button").off('click').on('click', secondClick)
}

function secondClick() {
    alert("Second Clicked");
    $("#click-button").off('click').on('click', firstClick)
}

ここでの実例：http：//jsfiddle.net/K3Xk4/

于 2013-03-21T09:25:01.653 に答える
4

ハンドラーを毎回変更する必要はありません。関数と変数を使用して、ボタンがすでにクリックされているかどうかを確認できます。

var even = false;

$('#click-button').click(function() {
    if(even) {
        doEven();
    } else {
        doOdd();
    }

    even = !even;
});

function doOdd() {
    // first click, third click, fifth click, etc
}

function doEven() {
    // second click, fourth click, sixth click, etc
}
于 2013-03-21T09:25:20.067 に答える
1

あなたは単にこのようにすることができます

<button id="click-button">test</button>

    var flag = 1;
    $("#click-button").click(function(){
        if(flag == 2){
            secondClick(); flag = 1;
        }else{
            firstClick(); flag = 2;
        }
    });

    function firstClick(){
        alert("First Click.");
    }

    function secondClick(){
        alert("Second Click.")
    }

check here http://jsfiddle.net/K3Xk4/5/

于 2013-03-21T09:33:47.003 に答える
0

カスタムイベントとデータ処理を使用します。

$('#click-button').on({
    firstClick : function()
    {
        // do something
        alert(111);

        // switch back
        $(this).data('nextClick', 'secondClick');
    },

    secondClick : function()
    {
        // do something
        alert(222);

        // switch back
        $(this).data('nextClick', 'firstClick');
    },

    click : function()
    {
        var nextClick = $(this).data('nextClick') || 'firstClick';
        $(this).trigger( nextClick );
    }
});

ここでの例：http：//jsfiddle.net/psycketom/nbSMg/

関数の外部で変数を定義する必要がないため、常に同じ要素スコープを使用できます。

少しやり過ぎかもしれませんが、維持するのが最も簡単です。

于 2013-03-21T09:27:02.493 に答える