javascript - changing click state with a variable with jquery -

i have distinct feeling i'm going wrong way.

what have list of hyperlinks, each of hyperlinks when clicked run through short sequence , left in different state, , if click them again, revert original state.

var favourites = function(action, trgt){ var state = 0 $(trgt).on(action, function(e){     if(state === 0){         state = 1;         thistrgt = $(e.currenttarget);         thistrgt.css('opacity', '0.6');         thistrgt.removeclass('favourites');         thistrgt.addclass('favouriteschangestate');         thistrgt.text('saving favourites');         settimeout(function(){             thistrgt.css('opacity', '1');             thistrgt.text('saved!');             settimeout(function(){                 thistrgt.text('remove favourites');             },2000);         }, 2000);     }else if(state === 1){         state = 0;         thistrgt = $(e.currenttarget);         thistrgt.css('opacity', '0.6');         thistrgt.removeclass('favouriteschangestate');         thistrgt.addclass('favourites');         thistrgt.text('removing favourites');         settimeout(function(){             thistrgt.css('opacity', '1');             thistrgt.text('removed!');             settimeout(function(){                 thistrgt.text('add favourites');             },2000);         }, 2000);     }     return false; });  } // fire favourites('click', '.favourites'); 

the second state attempt revert click original state.

at moment, each of links firing separately there's host of problems; first being if statement failing , inks fire same bit again. second if fire links in succession break , lock up.

here's jsfiddle

thanks

simplify code, use ternary operators (?:) define texts, states...
store current state data-* property boolean , reuse define states:

live demo

var favourites = function (action, trgt) {     $(trgt).one(action, function oneclick(e) { // 1 prevent multiple clicks         e.preventdefault();         var $this = $(e.target),                    ds = $this.data('state');             $this.data('state', !ds)               // toggle , store data state            .css('opacity', '0.6')            .toggleclass('favouriteschangestate favourites')            .text(ds? 'removing favourites':'saving favourites');                settimeout(function () {             $this.text(ds? 'removed!':'saved!');             settimeout(function () {                 $this.css('opacity', '1')                      .text(ds? 'add favourites':'remove favourites')                      .one('click',oneclick);   // allow click again             }, 2000);         }, 2000);     }); };  // fire favourites('click', '.favourites'); 

also read:
http://api.jquery.com/toggleclass/
http://api.jquery.com/one/