JavaScript for循环中的jQuery不起作用

我尝试在for循环中运行jQuery，如下所示：

var frameNumber = 15; // How many frames are in your animation

for(var i = 1; i < frameNumber + 1; i++){
    var flipDelay = i * 100;

    $('.flipbook').delay(flipDelay).addClass('flipbook-' + i);
}

这些类在CSS样式表中定义，每个类都有不同的应用背景。我只需要jQuery/JS循环遍历它们，直到到达最后一帧

编辑：不是“动画书01”和“动画书1”阻止了我将其付诸实施。很抱歉让你感到困惑

编辑：在函数运行后，我需要我的div如下所示：

<div class="flipbook flipbook-1 flipbook-2 flipbook-3 flipbook-4 ... flipbook-15"></div>

var frameNumber=15；
对于（变量i=1；i

试试这个：

addClass('flipbook-' + (i<10?("0"+i):i));

---

addClass（“动画书-”+（i您误用了
delay（）
函数。jQuery只会对开箱即用的效果进行排队（例如
fadeIn（）
或
slideUp（）
），而不是
show（）
、
hide（）
或
addClass（）
）

带有
addClass（）
的非工作
delay（）
示例：

相反，您应该像其他人提到的那样使用
setTimeout
。不过，我建议使用递归方法，而不是
for
循环：

var frameNumber = 15;
showFrame(1);
function showFrame(i) {
  $('.flipbook').addClass('flipbook-' + i);
  if (i < frameNumber) {
    setTimeout(function() { showFrame(i+1); }, 100);
  }
}

var frameNumber=15；
展示架（1）；
功能展示架（一）{
$（'.flipbook'）.addClass（'flipbook-'+i）；
if（i
如前所述，
addClass（）
方法是一个立即调用的方法。默认情况下，它不会遍历处理所需的动画队列。
delay（）

这里是我提出的一个有趣的解决方案，它允许您通过动画队列使任何jQuery方法工作，因此您可以通过内置动画队列对方法排序，可以使用
.delay（）
来控制计时，可以插入其他动画，等等

// generic method to allow you to run any jQuery method through the animation queue
// so they will be serialized with other asynchronous animation methods
// such as .delay(), .animate(), .slideUp(), etc...
jQuery.fn.queueMethod = function(methodName /* arg1, arg2, ... */) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    self.queue(function(next) {
        self[methodName].apply(self, args);
        next();
    })
    return this;
}    

var frameNumber = 15; // How many frames are in your animation

for (var i = 1; i <= frameNumber; i++) {
    $('.flipbook').delay(100).queueMethod("addClass", "flipbook-" + i);
}

//允许通过动画队列运行任何jQuery方法的通用方法
//因此，它们将与其他异步动画方法一起序列化
//例如.delay（），.animate（），.slideUp（）等。。。
jQuery.fn.queueMethod=函数（methodName/*arg1，arg2，…*/）{
var self=这个；
var args=Array.prototype.slice.call（参数，1）；
self.queue（函数（下一步）{
self[methodName].apply（self，args）；
next（）；
})
归还这个；
}    
var frameNumber=15；//动画中有多少帧
对于（var i=1；i'flipbook-'+i=flipbook1不是flipbook01。我已经更改了图像名称。我只是从一个较旧的文件中复制了这段代码。所以它很酷。
.delay（）
对
.addClass（）
没有任何作用。它只对排队的项目（如动画）有效，而不是正常的方法。
（'flipbook-+i）
将是
flipbook1
而不是
flipbook01
作为OP Want您确定这对您有效吗？我似乎看不到flipbook-j类被应用到。flipbook。我知道它应该如何工作，但出于某种原因我无法让它工作。它只是一个空白页。编辑：找到了。但这不是我要找的。我会更新我的原始帖子。@DustIndowell 22检查更新的答案和工作演示，请参阅控制台日志。更新。但是，他已经尝试了setTimeout，这是答案，因为延迟不适用于addClass方法。他没有理由不能使用
setTimeout（）
在循环中，解决他对更易于维护代码的要求。此外，OP编辑了他们的问题，表示不需要前导零，因此您的答案不是OP现在想要的。这正是我需要的信息。谢谢：）
var frameNumber = 15;
showFrame(1);
function showFrame(i) {
  $('.flipbook').addClass('flipbook-' + i);
  if (i < frameNumber) {
    setTimeout(function() { showFrame(i+1); }, 100);
  }
}

// generic method to allow you to run any jQuery method through the animation queue
// so they will be serialized with other asynchronous animation methods
// such as .delay(), .animate(), .slideUp(), etc...
jQuery.fn.queueMethod = function(methodName /* arg1, arg2, ... */) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    self.queue(function(next) {
        self[methodName].apply(self, args);
        next();
    })
    return this;
}    

var frameNumber = 15; // How many frames are in your animation

for (var i = 1; i <= frameNumber; i++) {
    $('.flipbook').delay(100).queueMethod("addClass", "flipbook-" + i);
}