How do I cycle through different classes whenever I click a div in jquery?

Question

I have this div with class whose possible values "class01" to "class10".

I want to cycle through the different classes whenever the div is clicked.

Is there something similar to toggleClass(class) but accepts multiple classes as input?

Answer 1

maybe: http://jqueryui.com/demos/accordion/

cycling is for?? (you use toggle, hide and show them, correct?)

Answer 2

You could make a mini-plugin that does it:

$.toggleClassOnClick = function(prefix, max){
   return this.addClass(prefix + 1).data('cur', 1).click(function(){
      var $this = $(this), 
           curr = $this.data('cur'),
           idx  = cur + 1;

      $this.removeClass( prefix + curr);

      if(idx > max) idx = 1;
      $this.addClass( prefix + idx).data('cur', idx);
   });
}

You would use it like this:

$("#mydiv").toggleClassOnClick('class', 10);

And it will assign class1 to the div, and on every click increment the class until it reaches class10, then start back at class1 again. If you wanted to use class01 you can adjust this code as necessary.

Answer 3

How about something like this?

var num =0;
function pickAClass()
{      
  // lots of different ways to do this bit
  switch(num++)
  {
    case 1:
      return "class01";
    ...          
  }
}

then when you toggle...

toggleClass(pickAClass());