Jquery 一个接一个地添加类，每个类在一秒钟后添加

我的目标是：一个接一个地添加类[test0 test1 test2]，直到10，每个类在一秒钟后添加

$('.rating-block').AddClass('test0 test1 test2 ... test10' );

我的代码[只是尝试使用此代码，不再了解此代码]

       for ( var i = 0; i < 11 ; i = i + 1 ) {
             setTimeout(function(){
                $( ".rating-block" ).addClass('test' +i);
                console.log(  i );
            },1000);
       }

for（变量i=0；i<11；i=i+1）{
setTimeout（函数（）{
$（“.rating block”）.addClass（'test'+i）；
控制台日志（i）；
},1000);
}

最好在此处使用：

因为使用

setTimeout

将迫使您实现承诺功能或添加大约10个回调，而您的代码将很难看

编辑：

若要反转，只需扩展上面的代码并添加另一个setInterval即可

if( i == 11 ) {
    clearInterval( interval );
    i = 10;
    interval = setInterval(function(){
        if( i == 0 ) {
            clearInterval( interval );
        }
        $( ".rating-block" ).removeClass('test' +i);
        i--;
    },1000);
}

甚至可以将这些代码作为函数并进行循环（从0添加到10，然后从10删除到0，依此类推）：

函数addClasses（）{
对于（变量i=0；i<11；i=i+1）{
（职能（j）{
setTimeout（函数（）{
$（“.rating block”）.addClass（'test'+j）；
控制台日志（j）；
}，i*1000）；
}（i） ）；
}
setTimeout（函数（）{
移除类（）；
}, 10 * 1000);
}
函数removeClasses（）{
对于（变量i=10；i>=0；i=i-1）{
（职能（j）{
setTimeout（函数（）{
$（“.rating block”）.removeClass（'test'+j）；
控制台日志（j）；
}（11-i）*1000）；
}（i） ）；
}
setTimeout（函数（）{
addClasses（）；
}, 10 * 1000);
}
addClasses（）；

---

.

这将在1秒后立即设置所有类，而不是每秒一个一个。哦，我看到您现在使用了

I

变量，您是对的。你的解决方案也可以。我们可以在第十节课后倒转（取消课程）吗@ROX@ShibinRagh是的，这是可能的，检查更新的答案，你也可以使它成为一个循环…我们可以在第十节课后反转（删除类）吗@安提拉特

if( i == 11 ) {
    clearInterval( interval );
    i = 10;
    interval = setInterval(function(){
        if( i == 0 ) {
            clearInterval( interval );
        }
        $( ".rating-block" ).removeClass('test' +i);
        i--;
    },1000);
}

for ( var i = 0; i < 11 ; i = i + 1 ) {
    (function (j) {
        setTimeout(function () {
            $( ".rating-block" ).addClass('test' + j);
            console.log( j );
        }, i * 1000);
    }(i));
}

for ( var i = 10; i >= 0 ; i = i - 1 ) {
    (function (j) {
        setTimeout(function () {
            $( ".rating-block" ).removeClass('test' + j);
            console.log( j );
        }, (11 - i) * 1000);
    }(i));
}

function addClasses() {
    for ( var i = 0; i < 11 ; i = i + 1 ) {
        (function (j) {
            setTimeout(function () {
                $( ".rating-block" ).addClass('test' + j);
                console.log( j );
            }, i * 1000);
        }(i));
    }

    setTimeout(function () {
        removeClasses();
    }, 10 * 1000);
}

function removeClasses() {
    for ( var i = 10; i >= 0 ; i = i - 1 ) {
        (function (j) {
            setTimeout(function () {
                $( ".rating-block" ).removeClass('test' + j);
                console.log( j );
            }, (11 - i) * 1000);
        }(i));
    }

    setTimeout(function () {
        addClasses();
    }, 10 * 1000);
}

addClasses();