jquery - 使用 jquery 在多个类之间进行更改

Question

我有以下代码:

<div class="drawing1"></div>    
<button id="start">Begin</button>

当用户单击“按钮”时，分配给 DIV 元素的类应从“drawing1”更改为“drawing5”，并遍历其间的每个绘图(总共 5 个绘图)。它还应该有大约 500 的delay()。我的第一个想法是:

$('div').delay(800).toggleClass('drawing1 drawing2');

这有效，但是当我尝试添加其余的绘图时(尝试了使用切换类和添加/删除类的几种方法)，它要么跳到最后一张，要么只跳到第二张。

我该如何进行设置，以便我可以从一个绘图类转到下一个绘图类，逐一浏览每个绘图类，并为每个绘图类应用延迟。

Answer 1

var i = 2; //Assumes drawing1 is already applied to the div
var nextDrawing = function(){
    $("div").removeClass()
            .addClass("drawing"+i);

    i = ((i + 1) % 5); //To cycle from 1 to 5
    i = i == 0 ? 5 : i;
}
$('#start').click(function(){
    setInterval(nextDrawing, 500);
});

应该可以解决问题。

编辑:如果有人多次单击该按钮，以下修改可能对清除间隔有用。

var i = 2; //Assumes drawing1 is already applied to the div
var nextDrawing = function(){
    $("div").removeClass()
            .addClass("drawing"+i);

    i = ((i + 1) % 5); //To cycle from 1 to 5
    i = i == 0 ? 5 : i;
}

var intervalID = undefined;
$('#start').click(function(){
    if( intervalID != undefined )
    {
        clearInterval(intervalID);
    }
    intervalID = setInterval(nextDrawing, 500);
});

这是一个工作示例:http://jsfiddle.net/ajhuU/