Question

我有一组带有编号ID的<span>，我希望将<span>添加到Id=1，等待3秒删除类，而不是将类添加到<span id=2>并且某某......

如何使此代码正常工作。 while循环无法调用setTimeout任何人可以提供帮助吗？

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;
}

Answer 1

检查this jsfiddle以查看代码中实际发生的情况。

删除while循环并将其设置为这样（请参阅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();
 }
}

Answer 2

这对于jQuery动画函数来说是最简单的。

这是所有所需的：

var spanId = 1;

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

http://jsfiddle.net/alnitak/Bs8kj/

的工作演示

对于更通用的假设ID并且不需要外部变量，请尝试：

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

注意：数字ID是HTML5的东西。它们也不受CSS支持。

while循环调用setTimeout不起作用

2 个答案: