Question

Im trying to change class in the same dive twice using this simple 2 sunctions:

  $('.q_one').click(function(){
  $(this).removeClass('q_one').addClass('q_two');

  });



$('.q_two').click(function(){
      $(this).removeClass('q_two').addClass('q_three');

      });

So I was hoping this to work in the way, that when I click on .q_one the class will change to q_two, and the once It has a this class after click It will change it to q_three.

Unfortunately it works only on first example.

What do I do wrong please?

Answer 1

It’s because the q_two doesn’t exist when the handler is bound.

I’d put your classes in an Array, and cycle them by maintaining an index. I assume at the end you want to return to the first.

var classes = ['q_one','q_two','q_three'],
    i = 0;

$('.q_one').click(function(){
    $(this).removeClass(classes[ i ])
           .addClass(classes[ i = ++i % classes.length ]);
});

Demo: http://jsfiddle.net/JH9Ve/