jquery - 用jQuery改变按钮的功能？

Question

这可能是一个愚蠢的问题，但我就是无法正确回答。我可以用普通的 JavaScript 改变按钮的功能，但不能用 jQuery。我的目标是一个非常简单的文本调整大小按钮。这个按钮需要两个不同的功能；一个使文本变大并将单击功能更改为另一个功能的功能，另一个功能使文本变小并再次将单击功能更改为第一个功能。由于相同的按钮将用于放大和缩小文本 Sixe，因此我需要它来工作。我现在正在做一个学校项目，我们只能使用 jQuery/jQuery UI 来完成这项任务。

使用普通的 JavaScript，它会是这样的：

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

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

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

如何使用 jQuery 实现相同的目标？

Answer 1

像下面的代码这样的东西会起作用。

$("#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/

Answer 2

您不需要每次都更改处理程序。您可以使用函数和变量来检查您是否已经单击了按钮（或没有）。

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
}

Answer 3

你可以简单地这样做

<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/

Answer 4

我会使用自定义事件和数据处理：

$('#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/psyketom/nbSMg/

您始终使用相同的元素范围，无需在函数之外定义变量。

可能有点矫枉过正，但最容易维护。