each() 只处理最后一个对象（使用 foreach 循环）

Question

我正在尝试调用 HTML5-Canvas 动画并在每个项目中使用 class .object 重复它。但是 javascript 仅适用于最后一项！

<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 让它工作，但我更愿意让它为每个项目工作 class:

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

Answer 1

您应该使用 $(this).get(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);
});

Answer 2

如果您已经有对元素的引用（如在 each() 代码块中），那么提取元素的 class 以传递给另一个函数以重新

几乎没有意义=22=] 元素；只需传递元素。

另请注意，您当前的逻辑存在缺陷，因为您在循环中有一个循环。试试这个简化版本：

$('.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 缺少 >。

Answer 3

我只是想 分享这个，因为我的实际项目使用了多个动画和不同的库。（这就是为什么我最终得到了不起作用的双循环）。因此，如果您有更简洁的方法来执行此操作，请分享。这是我项目中的代码：

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

each() 只处理最后一个对象（使用 foreach 循环）

each() only working on last object (with foreach loop)

html

javascript

each

jquery

for-loop