jquery - Split variables in brackets with javascript -

i have tried google not able find answer problem.

my javascript/jquery far:

$(function() {     var facegroup = ['clock-clock.png','clock-clock-2.png','clock-clock-3.png'];     var arm1group = ['clock-arm1.png','clock-arm1-2.png','clock-arm1-3.png'];     var arm2group = ['clock-arm2.png','clock-arm2-2.png','clock-arm2-3.png'];     var arm3group = ['clock-arm3.png','clock-arm3-2.png','clock-arm3-3.png'];     var bulletgroup = ['clock-bullet.png','',''];      $('button').click(function() {         facegroup.split(/*thirst click use clock-clock.png second click use clock-clock-2.png third click etc...*/);         //do     });      $('.holder').css('backgroundimage','url(' + facegroup + ')');     $('.hours').css('backgroundimage','url(' + arm1group + ')');     $('.minutes').css('backgroundimage','url(' + arm2group + ')');     $('.seconds').css('backgroundimage','url(' + arm3group + ')');     $('.bullets').css('backgroundimage','url(' + bulletgroup + ')'); }); 

how can achieve when click button first first variable in brackets , on second click use second variable.

so on first click use:

• clock-clock.png

• clock-arm1.png

• clock-arm2.png

• clock-arm3.png

• clock-bullet.png

and on second click need use this:

• clock-clock-2.png

• clock-arm1-2.png

• clock-arm2-2.png

• clock-arm3-2.png

• clock-bullet-2.png

and need continue 3 clicks total , have use first variable again, hope have explained problem clearly.

use variable keep track of current index in array(s) , update on each click. example:

var index = 0; $('button').click(function() {     var currface = facegroup[index];     //do same other arrays      $('.holder').css('backgroundimage','url(' + currface + ')');     // etc      // update index     index = (index + 1) % facegroup.length;     // note assuming arrays same length! }); 

note if don't need variable currface else, can use facegroup[index] in .css line.

another thought: might easier replace arrays single array of objects because make easier keep them lined , prevent errors with, example, adding item 1 array , forgetting another. this:

var clocks = [     {          face: 'clock-clock.png',          arm1: 'clock-arm1.png',          arm2: 'clock-arm2.png',         arm3: 'clock-arm3.png',         bullet: 'clock-bullet.png'      },     {          face: 'clock-clock-2.png',          arm1: 'clock-arm1-2.png',          arm2: 'clock-arm2-2.png',         arm3: 'clock-arm3-2.png',         bullet: '' }, // etc ] 

and can each property with:

var currface = clocks[index].face; var arm1 = clocks[index].arm1; // etc