使用jquery在多个类之间进行更改
使用jquery在多个类之间进行更改
提问于 2013-04-17 03:33:11
我有以下代码：
<div class="drawing1"></div>
<button id="start">Begin</button>当用户单击按钮时，分配给DIV元素的类应该从drawing1更改为drawing5，并通过其间的每个绘图(总共有5个绘图)。它也应该有大约500的延迟()。我的第一个想法是：
$('div').delay(800).toggleClass('drawing1 drawing2');这是可行的，但当我尝试添加其余的绘图时(使用toggleclass和add/remove class尝试了几种方法)，它要么跳到最后一个，要么只添加第二个。
我如何设置才能从一个绘图类转到下一个绘图类，一个接一个地检查每个绘图类，并对每个绘图类应用延迟。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-17 03:38:37
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/
Stack Overflow用户
发布于 2013-04-17 03:37:38
var leMethod = function(){ // wrapping in a method localizes variables
var max = 5; // nr of drawings
var activeIdx = 0; // active drawing
var timeout = 500; // the time between changes
var originalClass = 'some classes that are always there';
setTimeout(function(){ // execute the method on timeout expiration
var el = $('div'); // get whatever element you wish to manage
el.attr('class', originalClass); // restore original class
el.addClass('classNr'+activeIdx); // add your cycle class
activeIdx = (activeIdx+1) % max; // update index
}, timeout);
};
leMethod();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16045551
复制相关文章
相似问题
腾讯云开发者
