Question

我正在尝试思考这个特定功能的逻辑，并且我很难这样做。

功能

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

div＃fuel .one

div＃fire .two

div＃blah .three

div #test .four

div＃rain .five

我有五个班级的数组，并希望轮换这五个div，使他们的班级（或从五个减少到一个）。理想情况下，这种变化会在div之间略微错开（约100ms）。

处理此问题的最佳方法是什么？循环通过我的阵列？将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);

这是一个＆＃34; Uncaught TypeError：undefined不是一个函数＆＃34;错误。

编辑：工作代码

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

jQuery从数组中旋转类

1 个答案: