一键两个不同的动作

Question

I'm new to development section . I have a small clarification in Jquery . A single button should possess two different action . Let us consider a button name Pause/Resume if i click on pause button it should alert as pause by clicking on same button it has to display resume .

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

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

Answer 1

My favorite way is to use attributes (data). Kind of like:

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

Here's a solution:

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

Demo

---

Quick Plugin

Here's a plugin I just wrote that will make this easy:

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

Add this to the top of your code and you can do:

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

Demo

This adds a toggleClick function. This function takes two functions which each run.