関数によって複数の要素が動的に作成されたときに、attr（）関数がすべての文を実行しない場合

Question

以下の関数は、画面の右端に赤い点を作成し、アニメーション（） srcファイルは以下のように変更する必要があります。

function spawnEnemy() 
{ 
    $("body").prepend("<img src='red_dot.png' class='enemies' id='enemy' style='left:calc(" + thewidth/2 + "px)'/>"); 
    $("#enemy").attr("id", "enemy"+i); 
    $("#enemy"+i).css({"left" : thewidth+'px', "top" : (randomInt(10,500))+'px'}); 
    $("#enemy"+i).animate({left :'-400px'}, 20000); 
    $("#enemy"+i).click(function() 
    { 
     var snd = new Audio("laser.mp3"); 
     snd.play(); //function stops here 
     $("#enemy"+i).stop(); 
     $("#enemy"+i).attr("src","explosion.gif"); 
     $("#enemy"+i).css({"transform" : "scale(0.11,0.11)"}); 
     setTimeout(function() 
     { 
     $('#enemy'+i).hide(); 
     }, 350); 
    }); 
    i+=1; 
    } 

この機能は6秒ごとに実行されます。ただし、新しい要素が作成される前に要素がクリックされていない場合、クリックされた要素はすべて、コメントを配置した行で実行を停止します。私はコンソールをチェックしましたが、私は問題がidsでないことを知っていましたが、何かを見つけることができませんでした。それらはすべて、コンソールで異なるIDを持ち、snd.play（） snd.play（）の後のステートメントの効果のどれも見ることはできません、私は問題がそこにあると確信しています。この問題は、複数の要素が作成された場合にのみ発生します.6秒前に要素をクリックした場合、つまり関数が再度実行される前に要素がすべて正常に実行されるためです。また、widthはあらかじめ定義されたグローバル変数なので、関連しません。 私はjqueryの新機能ですので、紛失していることが明らかな場合はお詫びします。 編集：画面に要素が1つしかない場合でも、すべてのステートメントが実行されないようになりました。私はかなり失われています。

Answer 1

私は何が起こっているかを見ていると思います。私はカプセル化スコープに入っているので、コールバック内の$（this）で敵を参照する必要があります。

これで、jQueryコードをクリーンアップしましたそれを単純化するために少し。

function spawnEnemy() { 
    $('<img />', { 
     id: 'enemy' + i, 
     src: 'red_dot.png', 
     className: 'enemies', 
     style: 'left: ' + thewidth/2 + 'px; top: ' + randomInt(10,500) + 'px' 
    }) 
    .prependTo($('body')); 
    .animate({left :'-400px'}, 20000); 
    .click(function() { 
     var snd = new Audio("laser.mp3"); 
     snd.play(); //function stops here 
     $(this).stop(); 
     $(this).attr("src","explosion.gif"); 
     $(this).css({"transform" : "scale(0.11,0.11)"}); 
     setTimeout(function() { 
      $(this).hide(); 
     }.bind(this), 350); 
    }); 
    i+=1; 
}