jquery - How to change class name when click? -

jquery - How to change class name when click? -

i have icon lists, when click icon, alter class name "icmark2" , when click 1 time again alter "icmark3". default class name "icmark1" , there total 4 classes.

so tried, i'm having problem handling list of ids.

actually there lot of icon items.. how have prepare code ?

this sample, when see this, first item works.

http://fiddle.jshell.net/br2y2/2/

please help me~~

<span class="icmark"> <a href="#" class="icmark1" id="list1"></a> <!-- icmark1 ~ icmark4 --> </span> <span class="icmark"> <a href="#" class="icmark1" id="list2"></a> <!-- icmark1 ~ icmark4 --> </span> <span class="icmark"> <a href="#" class="icmark1" id="list3"></a> <!-- icmark1 ~ icmark4 --> </span> <style> span {display:block; margin:0 0 20px 0; } span { display:block; width:30px; height:30px; } .icmark1 {background:gray } .icmark2 {background:blue } .icmark3 {background:red } .icmark4 {background:green } </style> <script> var classes = new array("icmark1","icmark2","icmark3","icmark4"); var idx = 0; $("#list1").on("click", changeclass); function changeclass() { idx++; var nextclass = classes[idx % classes.length]; $("#list1").attr("class",nextclass); } </script>

try utilize .data(),

var classes = new array("icmark1", "icmark2", "icmark3", "icmark4"); $("#list1,#list2,#list3").on("click", changeclass); function changeclass() { var no = $(this).data('no') || 1; var nextclass = classes[no % classes.length]; $(this).attr("class", nextclass); no++; $(this).data('no', no); } demo

jquery