Haga un ciclo a través de múltiples colores de fondo: buscando mejoras en el código

Mira mi violín aquí

Aquí está el js en cuestión:

$(document).ready(function() { $('.clickMe').toggle( function() { $('#coloredDiv').css({ "background-color": "#eeeeee" }) }, function() { $('#coloredDiv').css({ "background-color": "#00ff00" }) }, function() { $('#coloredDiv').css({ "background-color": "#ff0000" }) }, function() { $('#coloredDiv').css({ "background-color": "#000000" }) }); }); 

El objective: cada vez que se hace clic en el enlace (“haga clic en mí”), el color de fondo de #coloredDiv debe cambiar a uno de los siguientes colores en el orden proporcionado: #eeeeee, # 00ff00, # ff0000, # 000000. Una vez que se alcanza el último color, si se hace clic nuevamente en el enlace, el ciclo debería comenzar de nuevo desde el primer color en la lista.

El código funciona pero me gustaría saber: ¿el código en su forma actual es respetable o no es tan bueno? ¿Estoy haciendo malas elecciones? ¿De qué otra manera podría escribirse esto para lograr el mismo resultado pero tal vez de una forma ligeramente mejor (es decir, más elegante)?

Por último, notará que al cargar la página, el cuadrado no tiene un color predeterminado. He jugado con la idea de incumplir con #eeeeee con la carga, pero me doy cuenta de que necesitaría contabilizar esto usando una statement condicional para verificar el color actual y luego aplicar el color apropiado dependiendo de la situación. Cualquier orientación sobre cómo abordar este tema sería muy apreciada.

Tenga en cuenta que quiero realizar esta tarea utilizando solo jQuery y sin complementos.

Gracias por la ayuda.

SECANDO un poco:

  var counter = 0; var colors = [ "#eeeeee", "#00ff00", "#ff0000", "#000000" ]; var $div = $('#coloredDiv'); $('.clickMe').click(function(){ $div.css({ "background-color": colors[(counter++)%colors.length] }) }); 

Con el operador de módulo [ % ], recorre la matriz sin exceder sus límites [ a%b evalúa como b-1 como máximo].

EDITAR: acaba de incrementar el contador, luego el módulo lo “restablecerá” a 0 cada array.length [no se reiniciarán realmente, solo el resultado de la expresión se verá como]. Busque en wikipedia operador de módulo, encontrará muchas propiedades interesantes.

  i | (i++)%arr.length --------- | 0 | 0 | | 1 | 1 | | 2 | 2 | | 3 | 3 | | 4 | 0 | | 5 | 1 | | 6 | 2 | | 7 | 3 | ... 

No sé mejor o no, pero eche un vistazo a lo siguiente:

 

Tenga en cuenta el atributo de data agregado a div.

 var colors = ['#eeeeee', "#00ff00", "#ff0000", "#000000"]; $(document).ready(function () { $colorDiv = $('#coloredDiv'); ln = colors.length; $('.clickMe').on("click", function () { var i = $colorDiv.data("index"); ++i; if (i >= ln) i = 0; $colorDiv.css({ 'background-color': colors[i] }); $colorDiv.data("index", i); }); }); 

El violín de trabajo está aquí .