var a = ["red", "blue", "green"]; var i = 0 $(".button").click(function() { i++; if (i >= 3) { i = 0; } console.log(i); $("body").addClass(a[i]); console.log(a[i]); }); .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="button">Click</button>Puede cambiar de blanco a azul y verde, pero si vuelvo a hacer clic en el botón, no cambiará a rojo, azul y verde. Pero la consola muestra 1,2,0,1,2,0 y también el color azul, verde, rojo, azul.
Su problema es que nunca elimina la clase anterior, por lo que eventualmente el cuerpo tiene las tres clases y solo usa la última. Agregar
$("body").removeClass(a[i]);al comienzo de su controlador de clics:
var a = ["red", "blue", "green"]; var i = 0 $(".button").click(function() { $("body").removeClass(a[i]); i++; if (i >= 3) { i = 0; } console.log(i); $("body").addClass(a[i]); console.log(a[i]); }); .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <button type="button" class="button">Click</button> </body>Este agregará y eliminará las diferentes clases de color hacia y desde el documento y no afectará a ninguna otra clase de documento que se haya asignado antes.
const a = ["red", "blue", "green"]; ai=-1;a.col=function(){const cl=document.body.classList; cl.remove(this[this.i++]); cl.add(this[this.i%=3]); console.log(this.i,this[this.i]); }; document.querySelector(".button").onclick=ev=>a.col(); .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } <button type="button" class="button">Click</button>Cambiar $("body").addClass(a[i]); a document.body.className = a[i];
Y no necesitas jQuery.
Al igual que:
var a = ["red", "blue", "green"]; var i = 0 document.querySelector(".button").addEventListener( 'click', function() { i++; if (i >= 3) { i = 0; } console.log(i); document.body.className = a[i]; console.log(a[i]); }); .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } <button type="button" class="button">Click</button>