用jQuery改變按鈕的功能？

這可能是一個愚蠢的問題，但我不能正確理解。我可以用普通的JavaScript來改變按鈕的功能，但不能用jQuery來改變。我正在瞄準一個非常簡單的文本調整大小按鈕。這個按鈕需要兩個不同的功能;一個使文本變大並將點擊功能改變爲另一個功能，而另一個功能使文本變小並再次將點擊功能改爲第一個功能。由於同樣的按鈕將用於放大和縮小文字六，我需要這個工作。我現在正在開展一個學校項目，我們只能使用jQuery/jQuery UI來完成這項任務。用jQuery改變按鈕的功能？

用普通的JavaScript，這將是這樣的：

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

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

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

如何實現用jQuery是一回事嗎？

來源

2013-03-21 mizuki

http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions – Martin 2013-03-21 09:23:32

我我以爲我徹底搜索了，但'切換'一詞一定已經溜走了我的腦海 – mizuki 2013-03-21 09:46:50

像下面的代碼可以工作。這裏

$("#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-21 09:25:01 ryadavilli

謝謝！我會試試這個。 – mizuki 2013-03-21 09:37:10

它工作完美，最後我可以交出我的任務;） – mizuki 2013-03-21 09:45:10

您不必每次更改處理程序。你可以使用一個函數和一個變量來檢查你是否已經點擊了按鈕（或不是）。

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-21 09:25:20

我會去與自定義事件和數據處理：

$('#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-21 09:27:02 jolt

你可以簡單地做喜歡這裏這

<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.") 
    }

檢查http://jsfiddle.net/K3Xk4/5/

來源

2013-03-21 09:33:47

用jQuery改變按鈕的功能？

回答

相關問題