Question

我正在尝试调用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);
}
});

Answer 1

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

Answer 2

你应该使用$（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 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循环）

3 个答案: