CODEWITHSUNDEEP
jqueryhtmlcss
Akshay
Akshay

Reputation: 14348

JQuery function not getting applied to every div

First of all here is my code http://codepen.io/akshay-7/pen/Ggjxwb

I am trying to shoot down the enemies, but as you can see i am able to shoot only one enemy at a time. Why can't i shoot down each enemy? The divs that i created using jquery have the id enemy-plane but still it is not working

I am not posting the entire code here but i am posting the part which i think is causing the problem

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

EDIT

i changed the ids to class but now all of the enemies explode if i shoot down one of them

Upvotes: 0

Views: 208

Answers (2)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

you can't use multiples IDs all with same value,Ids should be unique, change id to class

change it every where as class in js,css and html

JS 

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

and

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

and

  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

Upvotes: 1

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

The enemy-plane is not a class it's an ID : 

<div id="enemy-plane">

switch

<div class="enemy-plane">

Edit

Suppose you click on the image the code should look like this : 

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

Upvotes: 4

Related Questions