CODEWITHSUNDEEP
javascriptjqueryclickhide
NateRattner
NateRattner

Reputation: 67

JQuery/JavaScript hide one clicked element but not others

I'm creating a JavaScript and JQuery "Whack-a-Mole" game, and I'm appending "mole" images at random coordinates into the gamespace every two seconds. When a mole is clicked, I would like it to hide (disappear from the screen). However, the way I have the code written now, clicking on one mole causes all mole images to be hidden. Would love to hear any thoughts on selecting and hiding only the clicked mole image, but not hiding the other mole images.

Here's my "addMole" function:

function addMole() {
    xPos = randPosX();
    yPos = randPosY();
    $('#gamespace').append('<img src="img/mole.png" style="top:'+yPos+'px;left:'+xPos+'px" />').addClass('mole'); // insert mole into #gamespace
    repeatAddMole = setTimeout("addMole()", 2000); // append moles every 2 seconds
};

And here's the game's main function:

$(document).ready(function() {
    $('#start_button').click(function() { 
        start();
        $('#timer').show(); // show timer
        $('.mole').on("click", function(){
            incScore();
            $('img', this).hide();
        });
    });

Thanks!

Upvotes: 0

Views: 151

Answers (4)

Goran Ocokoljic
Goran Ocokoljic

Reputation: 61

I would do it pretty much in this way:

function addMole() {
   xPos = randPosX();
   yPos = randPosY();

   var el = $('#gamespace').append('<img src="img/mole.png" style="top:'+yPos+'px;left:'+xPos+'px" />').addClass('mole'); 
   el.on("click", function(){
       $(this).remove();
       incScore();
   });
   repeatAddMole = setTimeout("addMole()", 2000); 
};

append function returns you jQuery object of appended element, so you can attach event directly on it after it is created. If you create events before objects are created, events will not be attached to it. This way, you create element and then attach the event.

You could do it in the way mhodges wrote in his comment, but I simply don't like this way because I believe it's not that efficient.

Upvotes: 0

Viktor Kukurba
Viktor Kukurba

Reputation: 1370

Also the problem is cause you attach event only to created images (moles) before you clicked on start. You can use event delegation. Use this code out of start button click handler.

$( "#gamespace" ).on( "click", "img", function( event ) {
  incScore();
  $(this).hide();
});

Upvotes: 1

bradlis7
bradlis7

Reputation: 3479

You are adding the mole class to the #gamespace, not the image. Maybe you want this:

$('#gamespace').append($('<img src="img/mole.png" style="top:'+yPos+'px;left:'+xPos+'px" />').addClass('mole'));

Here's a demo to help you https://jsfiddle.net/bradlis7/ubar2Lzb/1/. I like to keep the functions doing what they say they are doing (addMole should not really be setting a new timer).

Upvotes: 2

LiveLongAndProsper
LiveLongAndProsper

Reputation: 359

You can do it like this:

$('#gamespace').append('<img onclick="this.style.display=\'none\'" src="img/mole.png" style="top:'+yPos+'px;left:'+xPos+'px" />').addClass('mole'); // insert mole into #gamespace

Upvotes: 1

Related Questions