修改

Question

首先，我的代码是http://codepen.io/akshay-7/pen/Ggjxwb

我试图击落敌人，但你可以看到我一次只能射击一个敌人。为什么我不能击落每个敌人？我使用jquery创建的divs标识为enemy-plane，但仍然无效

我不是在这里发布整个代码，但我发布了我认为导致问题的部分

var inter=setInterval (function(){
  var clone = []; 
  clone.push('<div id="enemy-plane">');
  clone.push('<span id="health">1000</span>');
  clone.push(' <img  src="http://img3.wikia.nocookie.net/__cb20130804150458/clubpenguin/images/2/24/X_Wing_Game_Fighter.pn g" class="enmy">');
  clone.push('  <div class="enmy-blt"></div></div>');
  $('#holder').append(clone.join(''));
},2000);
setTimeout(function(){
  clearTimeout(inter);
},10000);

修改

我将id更改为class但现在所有敌人都会爆炸，如果我击落其中一个

Answer 1

敌人的飞机不是一个类，它是一个ID：

<div id="enemy-plane">

开关

<div class="enemy-plane">

修改

假设您单击图像，代码应如下所示：

$(".enmy").click(function () { //get the closest plane from the image clicked $(this).closest(".enemy-plane").MakeItExplode(); });

Answer 2

你不能使用具有相同值的倍数ID，Ids应该是唯一的，将id更改为类

在class，js和css

中html的每个位置进行更改

JS

var $div2 = $('.enemy-plane');

和

 clone.push('<div class="enemy-plane">');

和

  var lef=$('.enemy-plane');

<强> CSS

.enemy-plane{ 
  height:80px;
  width:80px;
  left:500px; 
  animation:eny-move 5s 1; 
  -webkit-animation:eny-move 10s;
  -moz-animation:eny-move 10s;
  -o-animation:eny-move 10s;
  -ms-animation:eny-move 10s;
  top:100px;
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select:none; 
  user-select:none;
  -o-user-select:none;
  position:relative;
  -webkit-animation-fill-mode:forwards;
}

<强> HTML

 <div class="enemy-plane">
    <span id="health">1000</span>
    <img src="http://img3.wikia.nocookie.net/__cb20130804150458/clubpenguin/images/2/24/X_Wing_Game_Fighter.png" class="enmy"> 
    <div class="enmy-blt"></div>
  </div>

FORKED PEN

JQuery函数没有应用于每个div

修改

2 个答案: