each() 仅适用于最后一个对象（使用 foreach 循环）答案

【问题标题】：each() only working on last object (with foreach loop)each() 仅适用于最后一个对象（使用 foreach 循环）
【发布时间】：2016-08-24 06:50:02
【问题描述】：

我正在尝试调用 HTML5-Canvas 动画并在每个项目中使用 .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 让它工作，但我更愿意让它对每个具有类的项目工作：

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

【问题讨论】：

您可以将这一行$('.object').each( function() { 更改为$('.object').each( function(idx, obj) {，其中id 是循环ID（从零开始），obj 是当前的实际canvas 对象数组的循环......让我知道这是否是你想要的
函数里面写什么？
@ochi 在该示例中，idx 是匹配集中元素的索引，与元素的id 属性无关
这就是我所说的循环ID，应该说循环索引，但这里已经很晚了；很抱歉造成混乱

标签： javascript jquery html for-loop each

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您已经有对元素的引用（如在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 缺少 >。

【讨论】：

是的，在简单地执行我的实际代码时，掉落的画布只是一种草率 :)。感谢整洁的代码。这效果很好！
没问题，很乐意提供帮助。

【解决方案3】：

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

【讨论】：