JQuery: Switching between 3 classes (initially)

Question

I saw a few posts here about 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 a button that, when pressed, can cycle through classes 3 . But if in this case there is a need to cycle through 4, 5 or more classes, you can easily scale the script.

From now on, I can “quote” between the two classes, which basically “switches” more than the bike, so for this I have:

HTML:

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

JQuery

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

Here is a simple fiddle of this.

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

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

It happens that switching starts only between class1 and class3 .

So here is where I have my initial problem: how do I get the Toggle button to switch through classes 3 sequentially?

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

Answer 1

You can do it:

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

Demonstration

Answer 2

Here is another approach:

 if ($(this).hasClass('one')) { $(this).removeClass('one').addClass('two'); } else if ($(this).hasClass('two')) { $(this).removeClass('two').addClass('three'); } else if ($(this).hasClass('three')) { $(this).removeClass('three').addClass('one'); } 

Answer 3

 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 this should work fine :)

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

Answer 4

I converted the user3353523 response to a jQuery plugin.

 (function() { $.fn.rotateClass = function(cls1, cls2, cls3) { if ($(this).hasClass(cls1)) { return $(this).removeClass(cls1).addClass(cls2); } else if ($(this).hasClass(cls2)) { return $(this).removeClass(cls2).addClass(cls3); } else if ($(this).hasClass(cls3)) { return $(this).removeClass(cls3).addClass(cls1); } else { return $(this).toggleClass(cls1); // Default case. } } })(jQuery); $('#click-me').on('click', function(e) { $(this).rotateClass('cls-1', 'cls-2', 'cls-3'); }); 

 #click-me { width: 5em; height: 5em; line-height: 5em; text-align: center; border: thin solid #777; margin: calc(49vh - 2.4em) auto; cursor: pointer; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cls-1 { background: #FFAAAA; } .cls-2 { background: #AAFFAA; } .cls-3 { background: #AAAAFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="click-me" class="unselectable">Click Me!</div> 

---

Dynamic approach

 (function() { $.fn.rotateClass = function() { let $this = this, clsList = arguments.length > 1 ? [].slice.call(arguments) : arguments[0]; if (clsList.length === 0) { return $this; } if (typeof clsList === 'string') { clsList = clsList.indexOf(' ') > -1 ? clsList.split(/\s+/) : [ clsList ]; } if (clsList.length > 1) { for (let idx = 0; idx < clsList.length; idx++) { if ($this.hasClass(clsList[idx])) { let nextIdx = (idx + 1) % clsList.length, nextCls = clsList.splice(nextIdx, 1); return $this.removeClass(clsList.join(' ')).addClass(nextCls[0]); } } } return $this.toggleClass(clsList[0]); } })(jQuery); $('#click-me').on('click', function(e) { $(this).rotateClass('cls-1', 'cls-2', 'cls-3'); // Parameters //$(this).rotateClass(['cls-1', 'cls-2', 'cls-3']); // Array //$(this).rotateClass('cls-1 cls-2 cls-3'); // String }); 

 #click-me { width: 5em; height: 5em; line-height: 5em; text-align: center; border: thin solid #777; margin: calc(49vh - 2.4em) auto; cursor: pointer; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cls-1 { background: #FFAAAA; } .cls-2 { background: #AAFFAA; } .cls-3 { background: #AAAAFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="click-me" class="unselectable">Click Me!</div> 

Answer 5

HTML:

 <div id="example" class="red">color sample</div> 

CSS

 .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } 

JS:

 $(document).ready(function() { var colors = ['red', 'yellow', 'green']; var tmp; setInterval(function(){ tmp && $('#example').removeClass(tmp); tmp = colors.pop(); $('#example').addClass(tmp); colors.unshift(tmp); }, 1000); }); 

Demo

Answer 6

Another version that uses classList replace . Not yet supported by all browsers.

 var classes = ["class1", "class2", "class3"]; var index = 0; var classList = document.querySelector("div").classList; const len = classes.length; $('.toggle').click(function() { classList.replace(classes[index++ % len], classes[index % len]); }); 

 .class1 { background: yellow; } .class2 { background: orange; } .class3 { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="toggle">Toggle classes</a> <div class="class1"> look at me! </div> 

Answer 7

It worked for me, and I can stack as much as I want, and then easily wrap.

 switch($('div.sel_object table').attr('class')) { case "A": $('div.sel_object table').toggleClass('A B'); break; case "B": $('div.sel_object table').toggleClass('B C'); break; case "C": $('div.sel_object table').toggleClass('C D'); break; case "D": $('div.sel_object table').toggleClass('D A'); break; } 

Answer 8

Iterates over the index of classes and switches from one to another.

 var classes = ['border-top','border-right','border-bottom','border-left']; var border = 'border-top'; var index = 0; var timer = setInterval( function() { var callback = function(response) { index = ( ++index == 4 ? 0 : index ); $(element).html("text").toggleClass( border + " " + classes[index] ); border = classes[index]; }; }, 1000 );