jQuery: Toggling between 3 classes (initially)

Question

I've seen several posts here on SO but they are too specific in functionality and structure, and what I'm looking for is something more universal that I or anyone can use anywhere.

All I need is to have a button that when clicked can cycle between 3 classes. But if the case arises to have to cycle through 4, 5 or more classes, that the script can be easily scaled.

As of this moment I am able to 'cycle' between two classes which is basically more "toggling" than cycling, so for that I have:

HTML:

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">...</div>

jQuery:

$('.toggle').click(function () {
  $('div').toggleClass('class1 class2');
});

Here's a simple fiddle of this.

Now, you would (well, I) think that adding a third class to the method would work, but it doesn't:

$('div').toggleClass('class1 class2 class3');

What happens is that the toggling starts happening between class1 and class3 only.

So this is where I have my initial problem: How to have the Toggle button cycle sequentially through 3 classes?

And then: What if someone needs to cycle to 4, 5 or more classes?

Answer 1

You can do this :

$('.toggle').click(function () {
  var classes = ['class1','class2','class3'];
  $('div').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

Demonstration

Answer 2

var classes = ['class1', 'class2', 'class3'],
    currentClass = 0;

$('.toggle').click(function () {

    $('div').removeClass(classes[currentClass]);

    if (currentClass + 1 < classes.length)
    {
        currentClass += 1;
    }
    else
    {
        currentClass = 0;
    }

    $('div').addClass(classes[currentClass]);

});

Something like that should work OK :)

Tinker IO link - https://tinker.io/1048b