Click toggle with jquery/javascript

Question

I want to click a table element and to have it do x the first click and if clicked again perform Y

<td class='p' id='e1' onclick="myFunction2()"><img src='person2.png'/></td>

Thats what I have for my HTML for one click just now, but I wish to change that so that an item can be selected, then if clicked again for a deselect it would then trigger a different function.

Answer 1

Using a state variable. The state variable will swap between the values 0 and 1 on each click. Making use of state we can execute the corresponding function in fn array.

<td class='p' id='e1'><img src='person2.png'/></td>

$("td#e1.p").each(function(){
  var state = 1, fn = [myFunction1, myFunction2];
  $(this).click(function(){
    return fn[state = 1 - state].apply(this, arguments);
  });
});

Also, it's preferably to use proper event binding than inline JavaScript.

Answer 2

I'm going to assume (you didn't say) that you want the function to be called to alternate with every click:

$('#e1').on('click', function() {

    // retrieve current state, initially undefined
    var state = $(this).data('state');  

    // toggle the state - first click will make this "true"
    state = !state; 

    // do your stuff
    if (state) {
        // do this (1st click, 3rd click, etc)
    } else {
        // do that
    }

    // put the state back
    $(this).data('state', state);  
});

This uses jQuery's .data feature to store the button's click state in the button element itself.

Alternatively, you could use an external variable, but you should enclose the callback in a closure (in this case an immediately invoked function expression) to prevent the variable from becoming a global variable:

(function() {
    var state;

    $('#e1').on('click', function() {
        state = !state; 
        if (state) {
            // do this (1st click, 3rd click, etc)
        } else {
            // do that
        }
    });
})();

If the .on call and the state variable declaration are inside a jQuery document.ready handler that would have the same effect.

Answer 3

You could create a new atribute on the HTML element named, for example, "clickCount", and use it inside your event handler as a counter.

Let's say you have a button like this one:

<button data-click-count='0' onclick="myFunction(this)">My Button</button>

And you have a function like this:

function myFunction(elt) {
   // Gets the clicks count
   var count = $(elt).data("click-count");

   // Adds one to the click counter
   $(elt).data("click-count", ++count);  

   if (count == 1)
      doSomething();
   else if (count == 2)
      doSomethingElse();
}

Every time you click the button, you'll see an alert with the number of clicks you've made.

You can use the same method and apply it to your case.

Answer 4

demo: http://jsfiddle.net/HJwJf/

Link the toggle method with;

 $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );

Answer 5

Pretty basic, let me know if this is close to what you want.

http://jsfiddle.net/WNJ75/6/

<div id="e1">Click Me</div>

.

(function() {
    var click_track = 1;

        $("#e1").click(function() {
            if (click_track == 1)
              alert("do something");
            else if (click_track == 2) {
               alert("do something else and reset click");
               click_track = 0;
            }

            click_track++;
        });
})();