jQuery цикл событий

Question

У меня есть несколько черных div.

<div id='div1'></div> 
<div id='div2'></div> 
<div id='div3'></div> 
<div id='div4'></div> 
<div id='div5'></div> 

Я хочу 1-й один будет выделен на нагрузке

$('#div1').css('background', 'white'); 

Когда я нажимаю, я хочу, чтобы мой сценарий, чтобы выделить еще один

$('#div1').click(function() { 
    $('#div4').css('background', 'white'); 
    $('#div1').css('background', 'black'); 
}); 

Я хочу сделать это в последовательности, которую я хочу. Как фортепианный рисунок для песни .... 1, 4, 4, 3, 2, 2, 5. До тех пор, пока последовательность не сбрасывается, и 1-й div снова взят, поэтому я могу щелкнуть по нему столько раз, сколько я хотеть. Есть ли способ сделать это с помощью jQuery? Я не могу найти что-либо по этому вопросу

Answer 1

Вместо использования идентификаторов, вы можете упростить его, используя класс и некоторые JavaScript:

HTML

<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 

CSS

div { 
    background-color: black; 
} 
div.current { 
    background-color: white; 
} 

JavaScript

var sequence = [0, 2, 4, 3, 1], // configure your sequence here - NOTE: starts at 0 
    current = 0; // the current active item in the sequence, initially 0 

// highlight the first div in the sequence 
$('div:eq('+ sequence[current] +')').addClass('current'); 

// on clicking the 'current' one, move highlight to the next div in sequence 
$(document).on('click', '.current', function() { 
    $('div.current').removeClass('current'); // remove current highlight 
    if(++current >= sequence.length) current = 0; // get index of next div in sequence \ 
    $('div:eq('+ sequence[current] +')').addClass('current'); // highlight new div 
}); 

Демонстрация: http://jsfiddle.net/b6w9xbxn/1/