javascript - 一键两种不同的 Action

Question

我是开发部分的新手。我在 Jquery 中有一个小澄清。单个按钮应该具有两种不同的操作。让我们考虑一个名为“暂停/恢复”的按钮，如果我单击暂停按钮，它应该通过单击必须显示恢复的同一按钮来发出暂停警报。

var flag = false;
$("#btn_pause_resume").click(function (){
if (flag)
{

alert("pause");
}
else
{
alert("Resume");
flag = true;
}

Answer 1

我最喜欢的方法是使用属性(数据)。有点像:

<button data-paused="false"></button>

解决方案如下:

$('#btn_pause_resume').click(function () {
    if ($(this).data('paused')==='false') {
        alert('Resumed...');
        $(this).data('paused', 'true');
    } else {
        alert('Paused...');
        $(this).data('paused', 'false');
    }
});

Demo

---

快速插件

这是我刚刚编写的一个插件，可以让这一切变得简单:

$.fn.toggleClick=function(t,a,e){$(this).data("ToggleState",e||false),this.click(function(){"false"===$(this).data("ToggleState")?(t(),$(this).data("ToggleState","true")):(a(),$(this).data("ToggleState","false"))})};

将其添加到代码顶部，您可以执行以下操作:

$('#btn_pause_resume').toggleClick(
function () {
    alert('Resumed!');
},
function () {
    alert('Paused!');
}, true);//True makes second function run first

Demo

这添加了一个toggleClick 函数。该函数需要两个函数，每个函数都运行。