CODEWITHSUNDEEP
jquery
Jed La Rosa
Jed La Rosa

Reputation: 57

If statements for click events in jquery

How to make an if statements for the click event?

For example, I already click the button and it triggers the functions and if I click that button again, it will trigger the second function and if I click that button again, it will trigger the third function. After the third function, the button disables itself.

How to do this in jQuery?

Upvotes: 1

Views: 3982

Answers (8)

rakhi4110
rakhi4110

Reputation: 9281

May be you can place all your functions in an array and then access them based on a counter set in the global scope, that acts as the index.

Something like this

$(document).ready(function(){
    var count = 0;
    var funArray = [];
    funArray[0] = function(e) {
       e.preventDefault();
       $(e.target).text("first function");
    };
    funArray[1] = function(e) {
       e.preventDefault();
       $(e.target).text("second function");
    };
    funArray[2] = function(e) {
       e.preventDefault();
       $(e.target).text("third function");
    };
    $("a").click(function(e){
        e.preventDefault(); 
        if (count < funArray.length )
            funArray[count++](e);
        /*you could leave it with this in case you dont want the
        link to take over its default behavior. 

        But if you want the link to take over its default behavior
        you can add the following else condition :

        else
            $(this).off('click'); 
        */
    });
});

This way you can have as many functions you want for your click event. Fiddle

Upvotes: 0

GP12
GP12

Reputation: 120

Go through this link. http://jsfiddle.net/5Ng8T/

Use data-* attribute on your button tag in the view.

<input id="butn" type="button" value="Test" data-click="1">

jquery code goes like this 

$("#butn").click(function(){
var attrVal = $("#butn").attr("data-click");
switch(attrVal)
{ 

  case "1":
      first();
      $("#butn").attr("data-click","2")
      break;
  case "2":
      second();
      $("#butn").attr("data-click","3")
      break;
  case "3":
      third();
      break;
  default:
      alert("hello");
      break;
}
});

function first(){
alert("first");
}

function second(){
alert("second");
}

function third(){
alert("third");
}

Upvotes: 0

CJ Ramki
CJ Ramki

Reputation: 2630

you can do it with javascript also. Try this below code

    <html>
     <head>
      <script>
   var counter = 0;

    function myFunction() {
        counter++;
        if (counter == 1) one();
        if (counter == 2) two();
        if (counter == 3) three();
    }

    function one() {
        alert('first function');
    }

    function two() {
        alert('second function');
    }

    function three() {
        alert('third function');
    }
        </script > < /head>
    <body>
    <button onclick="myFunction()">Click Me... !!!</button > < /body>
    </html >

See This DEMO

Upvotes: 2

monu
monu

Reputation: 370

Go through this also :- http://jsfiddle.net/XwnGA/7/

var firstClick = true;
$(document).ready(function(){
  $("#test").click(function(){
    if(firstClick)
    {
        alert("firstclick");
        firstClick=false;
     }
    else
    {
       alert("second click");
    }

  });

});

Upvotes: 0

loxxy
loxxy

Reputation: 13151

This way (if btn represents the button):

function first() {

  // Your code here

  btn.off().click(second);
}

function second() {

  // Your code here

  btn.off().click(third);
}

function third() {

  // Your code here    
}

btn.click(first);

Upvotes: 0

Felix
Felix

Reputation: 38102

You can use a flag here:

var flag = false;

jQuery('.button').click(function() {
    flag = !flag;

    if(flag) {
        // First Function    
    } else {
        // Second Function  
    }
});

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

try something like this. YOu can set a global variable as flag for it

 <script type="text/javascript">

    $(document).ready(function () {
        var first = true;
        $("#myButton").click(function () {
            if (first) {
                first = false;
            }
            else {
                alert("you clicked for the second time");
            }

        });
    });


</script>
<body>
    <input type="button" id="myButton" value="clickhere" />
</body>

Upvotes: 0

rt2800
rt2800

Reputation: 3045

Add class into jQuery element using addClass() during first click; during next click, check if class is present using hasClass() and take different action; at the end of second click, remove class using removeClass() api.

Upvotes: 0

Related Questions