each（）只在最后一个对象上工作（使用foreach循环）

我试图调用一个HTML5-Canvas动画并在类.object的每个项目中重复它。但JavaScript只适用于最后一项！each（）只在最后一个对象上工作（使用foreach循环）

<ul> 
    <li><canvas class="object"></canvas></li> 
    <li><canvas class="object"></canvas></li> 
    <li><canvas class="object"></canvas></li> 
    <li><canvas class="object"></canvas></li> //this one shows 
</ul>

$('.object').each(function(){ 
    var $class = $(this).attr('class').split(' ').pop();  
    var $library = new lib.Animation(); 
    myAnimation($class, $library); 
}); 

function myAnimation($class, $library) { 
    var $canvas = document.getElementsByClassName($class); 
    for (i = 0; i < $canvas.length; i++) {   
     var $canvas_root = $library; 
     var $canvas_stage = new createjs.Stage($canvas[i]); 
     $canvas_stage.addChild($canvas_root); 
     $canvas_stage.update(); 
     createjs.Ticker.setFPS(24); 
     createjs.Ticker.addEventListener("tick", $canvas_stage); 
    } 
}

我得到它的工作使用ID，但是我宁愿得到它的工作为每个项目有一个类：

<ul> 
    <li><canvas id="object1" class="object"></canvas></li> 
    <li><canvas id="object2" class="object"></canvas></li> 
    <li><canvas id="object3" class="object"></canvas></li> 
    <li><canvas id="object4" class="object"></canvas></li> //this one shows 
</ul>

$('.object').each(function() { 
    var $id = $(this).attr('id'); 
    var $library = new lib.orbeOther(); 
    myAnimation($id, $library); 
}); 

function myAnimation($id, $library) { 
    var $canvas = document.getElementById($id);  
    var $canvas_stage = new createjs.Stage($canvas); 

    $canvas_stage.addChild($library); 
    $canvas_stage.update(); 

    createjs.Ticker.setFPS(24); 
    createjs.Ticker.addEventListener("tick", $canvas_stage); 
} 
});

来源

2016-04-29 Carl Papworth

你可以改变这一行'$（ '对象 '）每个（函数（）{'本'$（' 对象'） .each（函数（idx，obj）{''id'是循环id（从零开始），obj'是数组当前循环中实际的'canvas'对象...让我知道如果这就是你想要的 – ochi

我在函数内写什么？ –

@ochi在这个例子中，'idx'是匹配集内元素的索引，与元素的'id'属性无关 –

如果已经有到元素的引用（如在each()代码块），那么有一点点提取类的元件来传递给另一个函数来重新选择元件;只是传递元素。

另请注意，由于在循环中有循环，因此您的当前逻辑有缺陷。试试这个简化版：

$('.object').each(function() { 
    var library = new lib.Animation(); 
    var $canvas_stage = new createjs.Stage(this); 
    $canvas_stage.addChild(library); 
    $canvas_stage.update(); 
    createjs.Ticker.setFPS(24); 
    createjs.Ticker.addEventListener("tick", $canvas_stage); 
});

最后，您需要解决您的HTML作为您的交易</canvas缺少>。

来源

2016-04-29 08:18:31

是的，当简单地描述我的实际代码时，丢弃的画布只是一个马虎:)。整洁的代码的Thx。这工作膨胀！ –

没问题，很高兴帮助。 –

你应该参考元素本身使用$（本）获得（0）。我还没有尝试下面的代码，但它应该工作。

$('.object').each(function(){ 
    var canvasEle = $(this).get(0); 
    var $library = new lib.Animation(); 

    var $canvas_stage = new createjs.Stage(canvasEle); 
    $canvas_stage.addChild($library); 
    $canvas_stage.update(); 

    createjs.Ticker.setFPS(24); 
    createjs.Ticker.addEventListener("tick", $canvas_stage); 
});

来源

2016-04-29 08:16:21 sakp

只是觉得应该分享这，因为我的实际项目使用多个动画，蒙山不同的库。（这就是为什么我结束了没有工作的双循环）。所以，如果你有更干净的方式来做到这一点，请分享。下面是从我的项目代码：

JS：

$('.canvas').each(function(){ 
     $this = $(this); 
     $objCol = $this.css('color'); 
     var $objColBG = $(this).css('background-color'); 

     //Audio 
     if ($this.hasClass('orbeAudio')) { 
       var $library = new lib.orbeAudio(); 
     } 
     //Photo 
     else if ($this.hasClass('orbePhoto')) { 
       var $library = new lib.orbeText(); 
     } 
     //Text 
     else if ($this.hasClass('orbePhoto')) { 
       var $library = new lib.orbeText(); 
     } 
     //Video 
     else if ($this.hasClass('orbeVideo')) { 
       var $library = new lib.orbeVideo(); 
     } 
     //Other 
     else if ($this.hasClass('orbeOther')) { 
       var $library = new lib.orbeOther(); 
     } 

     var $orbeObj_stage = new createjs.Stage(this); 

     var $orbeObj_root = $library; 
     $orbeObj_stage.addChild($orbeObj_root); 
     $orbeObj_stage.update(); 

     createjs.Ticker.setFPS(24); 
     createjs.Ticker.addEventListener("tick", $orbeObj_stage);   
});

来源

2016-04-29 09:09:37

each（）只在最后一个对象上工作（使用foreach循环）

回答

相关问题