-1

I have a set of <span> with numbered Ids, i want to add class to <span> with Id=1 wait for 3 second remove class than add class to <span id=2> and so and so forth...

how to get this code work. while loop is unable to call setTimeout can any one help?

var spanSet = 4;
var spanId = 1;
while (spanSet != 0) {
    changeClass();
    spanSet--;
}

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(remove, 1000);
    spanId++;
}

function remove() {
    alert('remove');
    $('#' + spanId).removeClass("hilite");
    return true;
}
8
  • Why don't you use spanId in the while header (instead of spanSet)? Commented Jul 22, 2012 at 14:35
  • this is why questions should describe what you're trying to do, and not what you think is wrong. TJC has the right idea...
    – Alnitak
    Commented Jul 22, 2012 at 14:42
  • a timeout in a loop. somethings wrong logically. The spanId is not preserved
    – Stoia Alex
    Commented Jul 22, 2012 at 14:42
  • This seems to be related to your previous question. Keep in mind that SO is not the place to crowd-debug/-develop your code. Commented Jul 22, 2012 at 14:44
  • updated the question with more details Commented Jul 22, 2012 at 15:03

2 Answers 2

1

Check this jsfiddle to see what's actually happening in you code.

Remove the while loop and set it up like this (see jsfiddle):

var spanId = 1;
changeClass();

function changeClass(){
 $('#'+spanId).addClass("hilite");
 spanId+=1;
 setTimeout(remove, 500);
}

function remove(){
 $('#'+(spanId-1)).removeClass("hilite");
 if (spanId<6){
   changeClass();
 }
}
1
  • var spanId=1; changeClass(); function changeClass(){ $('#'+spanId).addClass("hilite"); setTimeout(remove, 3000); //you meant 3000 I suppose? } function remove(){ spanId++; $('#'+spanId).removeClass("hilite"); if (spanId<3) //you can also ditch spanset and use spanId<5 changeClass(); } used this way but remove function is not working Commented Jul 22, 2012 at 15:17
0

This would be simplest with the jQuery animation functions.

This is all that's needed:

var spanId = 1;

(function hilite() {
    $('#' + spanId).addClass('hilite').delay(3000).queue(function() {
        $(this).removeClass('hilite').dequeue();
        if (++spanId < 5) {
            hilite();
        }
    });
})();

working demo at http://jsfiddle.net/alnitak/Bs8kj/

For a more generic one which assumes nothing about the IDs, and needs no external variables, try this:

(function hilite(a) {
    $(a.shift()).addClass('hilite').delay(3000).queue(function() {
        $(this).removeClass('hilite');
        if (a.length) {
            hilite(a);
        }
    });
})(['#1', '#2', '#3', '#4']);

NB: numeric IDs is an HTML5 thing. They're also not supported by CSS.

1
  • this is better than mine. more jQuery like. Commented Jul 22, 2012 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.