Question

我正在创建一个JavaScript和JQuery“Whack-a-Mole”游戏，我每隔两秒就会在随机坐标上将“mole”图像附加到游戏区域中。当点击鼹鼠时，我希望它隐藏（从屏幕上消失）。但是，我现在编写代码的方式，点击一个痣会导致所有痣图像被隐藏。很想听到有关选择和隐藏点击痣图像的任何想法，但不能隐藏其他痣图像。

这是我的“addMole”功能：

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

这是游戏的主要功能：

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

谢谢！

Answer 1

您正在将mole类添加到#gamespace，而不是图像。也许你想要这个：

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

这是一个帮助您https://jsfiddle.net/bradlis7/ubar2Lzb/1/的演示。我喜欢让函数按照他们所说的去做（addMole不应该真正设置新的计时器。）

Answer 2

此外，问题是您在单击开始之前仅将事件附加到创建的图像（摩尔）。您可以使用活动delegation。从开始按钮单击处理程序中使用此代码。

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

Answer 3

你可以这样做：

$('#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

Answer 4

我会以这种方式做到这一点：

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函数返回附加元素的jQuery对象，因此您可以在创建后直接在其上附加事件。如果在创建对象之前创建事件，则不会将事件附加到事件。这样，您可以创建元素，然后附加事件。

你可以按照mhodges在评论中写道的方式来做，但我根本不喜欢这种方式，因为我认为它并不那么有效。

JQuery / JavaScript隐藏了一个单击的元素，但没有隐藏其他元素

4 个答案: