Javascript Динамически добавлен HTML

Пожалуйста, ознакомьтесь с следующим кодом, в котором перемещается только последнее изображение. http://jsfiddle.net/u8Bg3/Javascript Динамически добавлен HTML

Но второй один работает http://jsfiddle.net/u8Bg3/1/

Как указано в 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>

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 только последний движется

источник

2014-01-28 aWebDeveloper

Проблема заключается в создании объекта player(n) внутри цикла for вместе с присваиваниями 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))); 
    }

источник

2014-01-28 13:26:15 jacquard

но почему ... это так – aWebDeveloper

Если вы используете JQuery:

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

вместо строки, в которой вы меняете innerHtml в racetrack div, все элементы перемещаются. Однако, я не уверен, почему ...

источник

2014-01-28 12:59:32 ER144

theCoder в значительной степени пригвоздил проблему с вашим кодом.

Подобно тому, как дополнительная мысль, вы можете вручную создать необходимые дивы с помощью JavaScript вместо этого, он еще долго наматывается однако ...

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

источник

2014-01-28 13:47:31 Pineda

Javascript Динамически добавлен HTML

ответ

Смежные вопросы