Jquery- Same object, multiple clicks, multiple functions

Question

I'm trying to figure out the best way to achieve an effect of clicking on object1 once and causing a function once (animating object A), then clicking on object1 again and causing another function (animating another object-B), etc.

Can someone please toss me a few terminologies for what to use here? I do know how to achieve animation via jQuery/CSS add/remove/toggle class but I'm looking for the most efficient approach.

If you just want to toggle between two functions (first will be executed on first click, second will be executed on second click, then first again and so on..) then you can you the jQuery.toggle() function. — Vishal
– Vishal, Commented Jul 25, 2012 at 5:03
I guess a better way of describing the effect is of a gun shooting multiple bullets- 1-red, 2-blue, 3-green. Each time you click the gun it fires one of the 3 bullets...sorry I don't have enough working to show an example! — Commandrea
– Commandrea, Commented Jul 25, 2012 at 5:07
Then you can go by the example given by @andrewdotnich, but you'll have to be careful with it because it can bind multiple click events if you don't use it properly. Otherwise, you can keep a counter, and check it's value on each click and then execute the appropriate function according to it. — Vishal
– Vishal, Commented Jul 25, 2012 at 5:09

andrewdotnich · Accepted Answer · 2012-07-25 05:09:46Z

1

You're looking for JQuery 'one-shot' event handlers.

http://api.jquery.com/one/

function first() {
    $('#a').animate();
};

function next() {
    $('#b').animate();
};

$('#button').one('click', function() {
    first();
    $('#button').click(next);
};

This runs the first function the first time the click event is fired, and then re-binds the click event to the next function for all subsequent clicks.

EDIT: Alternately, if you have two and want them to alternate, you can use Vishal's suggestion of toggle: http://api.jquery.com/toggle-event/

EDIT 2:

Another alternative is to keep a counter in the event handler, like so:

function fireA() { /*...*/ }
function fireB() { /*...*/ }
function fireC() { /*...*/ }

$('#button').click(function() {
   var events = [fireA, fireB, fireC];

   //declare counter
   if(!this.counter) { this.counter = 0; }

   events[this.counter]();
   this.counter = (this.counter + 1) % 3;
});

edited Jul 25, 2012 at 5:09

answered Jul 25, 2012 at 5:03

andrewdotnich

16.9k9 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Commandrea Over a year ago

I am having a blast w/ this second edit alternative- thanks andrewdotnich!

andrewdotnich Over a year ago

A further refactoring: if the mechanics of the events are the same, but happen to different elements/objects, you could rewrite this so that the handler calls a single function, passing the element/object to be animated as a parameter. Then you can simply keep an array of potential parameters to the function, not references to functions…

Commandrea Over a year ago

Noted. The events are indeed a bit different- ending in different locations for each. The only remaining factor is that there is an if clause I'm working out- if a class is true on an object, then function fireA, etc....if class on function is false, the 'bullets' will simply fade. Getting there! Thanks for you help.

Collectives™ on Stack Overflow

Jquery- Same object, multiple clicks, multiple functions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related