I have a set of tiles and want to toggle their colour onclick
My classes are simply .a .b etc.
var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
var colorNew = ['j','i','h','g','f','e','d','c','b','a'];

$.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });
The obvious bug is start a>j then j>a at end. Ditto e>f>e
I confess logic is not my strength and I can't see what's wrong but, from an aesthetic point of view the mix just looks yuk.
If you want to play about here is my minified class sample:
<style>.a {background-color:#F00}.b {background-color:#F80}.c {background-color:#FF0}.d {background-color:#0F0}.e {background-color:#0F8}.f {background-color:#0FF}.g {background-color:#08F}.h {background-color:#00F}.i {background-color:#F0F}.j {background-color:#F08}TD {width:10%;height: 111px;text-align:center;font-family:sans-serif}</style><table width=70%><TR><TD class=a>A</TD><TD class=b>B</TD><TD class=c>C</TD><TD class=d>D</TD><TD class=e>E</TD><TD class=f>F</TD><TD class=g>G</TD><TD class=h>H</TD><TD class=i>I</TD><TD class=j>J</TD></TR></table>
The basic code works I am just trying for a bit more colour pizzazz mix.