简体   繁体   中英

one button two different actions

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;
}

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.

            var flag = false;
            $("#btn_pause_resume").click(function (){
                if (flag)
                {
                    flag = false;
                    alert("pause");
                }
                else
                {
                    flag = true;
                    alert("Resume");
                }
            });

Here is your player with playStatus property

var playStatus = false; (which is pause)

 $("#button").click(function(){ playStatus = !playStatus; }); 

with that just check against playStatus variable. if(playStatus){alert ....}

the first thing I notices was that the ckick function need the closing parenthesis at the end of the code. the if statement should check specifically for false. I also recommend using the triple equal to ensure that you are checking for that particular type.

This should work.

var flag = false;
$("#btn_pause_resume").click(function (){
    if (flag === false) {
        alert("pause");
    } else {
        alert("Resume");
        flag = true;
    {    
});

try this

<!DOCTYPE html>
<html>
<body>
<button id="btn" onclick="myFunction()">Pause</button>
<script>
  function myFunction() {
   var btn=  document.getElementById("btn");
    if(btn.innerHTML=="Pause")
    btn.innerHTML="Resume";
  else
      btn.innerHTML="Pause";
  }
</script>
</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM