Question

这可能是一个愚蠢的问题，但我无法做到这一点。我可以使用普通的JavaScript更改按钮的功能，但不能使用jQuery。我的目标是一个非常简单的文本调整大小按钮。这个按钮需要两个不同的功能;一个使文本更大并将click函数更改为另一个函数，另一个函数使文本更小并再次将click函数更改为第一个函数。由于相同的按钮将用于放大和缩小文本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.")
    }

点击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/psycketom/nbSMg/

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

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

用jQuery更改按钮的功能？

4 个答案: