Question

请查看以下代码，仅查看最后一张图片。 http://jsfiddle.net/u8Bg3/

正如Er144指出的那样，即使这也适用于jquery http://jsfiddle.net/u8Bg3/14/

我也发现了appendchild的工作但不是innerhtml

两者之间的区别在于，第一个html退出第二个，它是动态创建的

HTML

<body>
    <div class="racetrack" id="racetrack"></div>
    <div id="track-tmpl" class="hide">
        <div class="track"><div id="player{{ x }}" class="runner"></div></div>
    </div>
</body>

JS

var position = [0,40,80,120,80],
    racetrack = document.getElementById('racetrack');
    track_tmpl = document.getElementById('track-tmpl').innerHTML;


function Players(ele, ptimeout)
{
    this.el = ele;
    this.i = 0;
    this.iterations = 0;
    this.stop = 0;
    this.timeout = ptimeout;
    this.position = 0;

    this.animate = function(){
        if(this.i !== 0){
            this.move((this.position + 5), this.i);
        }
        if(!this.stop){
            if(this.i < 5){
                setTimeout(function(_this){             
                    _this.i++;
                    _this.animate();
                },this.timeout,this);
            }
            if(this.i==5){
                this.iterations ++;
                if(this.iterations < 50){
                    this.i = 0;
                    this.animate();
                }
                else{
                    this.el.style.backgroundPosition = '120px 0px';
                }
            }
        }
    };


    this.start = function(){
        this.stop = 0;
        this.animate();
    };

    this.move = function(to,positionIndex){
        this.position = to;
        this.el.style.backgroundPosition = '-'+position[positionIndex]+'px 0px';
        this.el.style.webkitTransform = 'translate('+to+'px)';
        this.el.style.mozTransform = 'translate('+to+'px)';
    }
}

function Game(noOfPlayers){

    this.noOfPlayers = noOfPlayers;

    this.players = new Array();

    for (var i = 0; i < this.noOfPlayers ; i++){
        racetrack.innerHTML = racetrack.innerHTML + track_tmpl.replace('{{ x }}', i);
        this.players.push(new Players(document.getElementById('player' + i), (120 + i)));
        /* issue here with dynamic added content*/
    }


    this.start = function(){
        for (var i = 0; i < this.noOfPlayers; i++){
            this.players[i].start();
        }
    };
}

var game = new Game(3);
game.start();

为什么在动态添加的html中只有最后一个移动

Answer 1

如果你使用jquery：

var element = track_tmpl.replace('{{ x }}', i);
$(racetrack).append(element);

而不是更改racetrack div的innerHtml的行，所有元素都在移动。但是，我不确定，为什么......

Answer 2

问题在于在for循环中创建player(n)对象以及使用`+ ='分配innerHTML。修改过的小提琴：http://jsfiddle.net/u8Bg3/15/工作正常。为一个好问题干杯！

  var finalized_tracks= "" ;
    for (var i = 0; i < this.noOfPlayers ; i++){
    finalized_tracks +=  track_tmpl.replace('{{ x }}', i);
    }
  racetrack.innerHTML = racetrack.innerHTML + finalized_tracks;

    for (var i = 0; i < this.noOfPlayers ; i++){
  this.players.push(new Players(document.getElementById('player'+ i),(120+i)));
    }

Answer 3

theCoder几乎已经解决了你的代码问题。

作为一个额外的想法，你可以使用javascript手动构建必要的div，但是它更长，但是......

for (var i = 0; i < this.noOfPlayers ; i++){
    var newTrack = document.createElement("div");
        newTrack.id = "track"+i;
        newTrack.className = "track";

        var newPlayer = document.createElement("div");
        newPlayer.id = "player"+i;
        newPlayer.className = "runner";

        newTrack.appendChild(newPlayer);
        racetrack.appendChild(newTrack);

        this.players.push(new Players(document.getElementById('player' + i), (120 + i)));
}

Javascript动态添加HTML

3 个答案: