jQuery 从数组中旋转类

Question

我正在努力思考这个特定功能的逻辑，但我很难做到。

特征

我有五个带有 ID 的 div，我希望能够将它们的类增加一到五个。

div#fuel.one

div#fire.two

div#blah.three

div#test.four

div#rain.five

我有五个类别的数组，我想轮换这五个 div，提高他们的类别(或从五个减少到一个)。理想情况下，此更改在 div 之间稍微错开(大约 100 毫秒)。

处理此问题的最佳方法是什么？遍历我的数组？将 ID 存储在第二个数组中，并与第二个计数器错开，当换出类时从哪里开始？任何建议将不胜感激。

** 编辑:代码**

var theClasses = ["one","two","three","four","five"];
setInterval(function() {
    for (var i=0; i<theClasses.length; i++) {
        $(".frame-one .hotspot").index(i).removeClass().addClass("hotspot "+ theClasses[i]);
    }
    theClasses.add(theClasses.shift());
}, 5000);

这会引发“未捕获的类型错误:未定义不是函数”错误。

编辑:工作代码

var theClasses = ["one","two","three","four","five"];
setInterval(function() {
        theClasses.push(theClasses.shift());
        $(".frame-one .hotspot").each(function(i) {
            var thisClass = theClasses[i];
            $(this).removeClass().addClass("hotspot "+ thisClass);
        });
}, 5000);

Answer 1

一种方法是用手头的类名保存一个数组。每当你想旋转时，在数组上做一个长度为 1 的循环移位来重新排列类。然后，使用 each(利用它提供的索引参数)根据索引为每个元素分配一个类。

See it in action .