一个JavaScript jQuery的内循环不工作 [英] jQuery within a JavaScript for loop not working

问题描述

我已经尝试运行的jQuery内像这样的循环：

  VAR frameNumber的= 15; //多少帧动画中的对于（VAR I = 1; I＆LT;帧编号+ 1;我++）{
    VAR flipDelay = I * 100;    $（'翻书'）延迟（flipDelay）.addClass（'flipbook-'+ I）。
}
 

我试图让这个等价但更多的灵活性，这样我就可以改变我多少帧使用：

  $（函数（）{
    的setTimeout（函数（）{$（）addClass（翻书-1）翻书。}，100）;
    的setTimeout（函数（）{$（）addClass（翻书-2）翻书。}，200）;
    的setTimeout（函数（）{$（）addClass（翻书-3）翻书。}，300）;
    的setTimeout（函数（）{$（）addClass（翻书-4）翻书。}，400）;
    的setTimeout（函数（）{$（）addClass（翻书-5）翻书。}，500）;
    的setTimeout（函数（）{$（）addClass（翻书-6）翻书。}，600）;
    的setTimeout（函数（）{$（）addClass（翻书-7）翻书。}，700）;
    的setTimeout（函数（）{$（）addClass（翻书-8）翻书。}，800）;
    的setTimeout（函数（）{$（）addClass（翻书-9）翻书。}，900）;
    的setTimeout（函数（）{$（动画书）。addClass（翻书-10）}，1000）;
    的setTimeout（函数（）{$（动画书）。addClass（翻书-11）}，1100）;
    的setTimeout（函数（）{$（动画书）。addClass（翻书-12）}，1200）;
    的setTimeout（函数（）{$（动画书）。addClass（翻书-13）}，1300）;
    的setTimeout（函数（）{$（动画书）。addClass（翻书-14）}，1400）;
    的setTimeout（函数（）{$（动画书）。addClass（翻书-15）}，1500）;
}）;
 

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

编辑：这不是翻书-01 VS翻书-1这是$ P $从得到这个工作pventing我。比较遗憾的是混乱。

编辑：我需要我的div像这样的功能之后跑了：

 ＆LT; D​​IV CLASS =翻书翻书-1翻书-2翻书-3翻书-4 ...翻书-15＆GT;＆LT; / DIV＆GT;
 

解决方案

正在滥用延迟（）功能。 jQuery将只排队效应外的开箱（如淡入（）或效果基本show（）），而不是东西像显示（），隐藏（）或 addClass（）。

非工作延迟的示例（）与 addClass（）： http://jsbin.com/hayay/4/

相反，你应该只使用的setTimeout 像其他人所说的。我建议一个递归的方法，虽然，而不是为循环：

  VAR frameNumber的= 15;
showFrame（1）;
功能showFrame（ⅰ）{
  $（'翻书'）addClass（'flipbook-'+ I）。
  如果（ⅰ＆下; frameNumber的）{
    的setTimeout（函数（）{showFrame第（i + 1）;}，100）;
  }
}
 

I've trying to run jQuery inside a for loop like this:

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);
}

I'm trying to get the equivalent of this but with more flexibility so I can change how many frames I use:

$(function(){
    setTimeout(function(){ $(".flipbook").addClass("flipbook-1") }, 100 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-2") }, 200 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-3") }, 300 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-4") }, 400 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-5") }, 500 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-6") }, 600 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-7") }, 700 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-8") }, 800 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-9") }, 900 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-10") }, 1000 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-11") }, 1100 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-12") }, 1200 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-13") }, 1300 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-14") }, 1400 );
    setTimeout(function(){ $(".flipbook").addClass("flipbook-15") }, 1500 );
});

The classes are defined in a CSS stylesheet and each class has a different background applied to it. I just need jQuery/JS to loop through them until the last frame is reached.

EDIT: It's not the flipbook-01 vs flipbook-1 that's preventing me from getting this to work. Sorry about that confusion.

EDIT: I need my div to look like this after the function has ran:

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

解决方案

You are misusing the delay() function. jQuery will only queue up effects out-of-the-box (e.g. fadeIn() or slideUp()), and not things like show(), hide(), or addClass().

Example of non-working delay() with addClass(): http://jsbin.com/hayay/4/

Instead, you should just use setTimeout like others have mentioned. I'd recommend a recursive approach, though, instead of a for loop:

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

这篇关于一个JavaScript jQuery的内循环不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！