用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改变按钮的功能？

回答

相关问题