CODEWITHSUNDEEP
jquery
Oleg Vegan
Oleg Vegan

Reputation: 35

jQuery loop of events

I've got a few black divs. 

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

I want the 1-st one to be highlighted on load

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

When I click it, I want my script to highlight another one

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

I want to do it in a sequence that I want. Like a piano pattern for a song.... 1, 4, 4, 3, 2, 2, 5. Until the sequence resets and and the 1-st div is highlighed again so I can click through it as many time as I want. Is there a way to do it using jQuery? I can't find anything on this matter

Upvotes: 0

Views: 42

Answers (1)

techfoobar
techfoobar

Reputation: 66663

Instead of using ids, you can simplify it using a class and some 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
});

Demo: http://jsfiddle.net/b6w9xbxn/1/

Upvotes: 1

Related Questions