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循環）

回答

相關問題