javascript - JQuery/JavaScript 隐藏一个单击的元素，但不隐藏其他元素

Question

我正在创建一个 JavaScript 和 JQuery“打地鼠”游戏，并且每两秒将随机坐标处的“地鼠”图像附加到游戏空间中。单击痣时，我希望它隐藏(从屏幕上消失)。然而，按照我现在编写代码的方式，单击一颗痣会导致所有痣图像被隐藏。很想听听有关仅选择和隐藏单击的痣图像而不隐藏其他痣图像的任何想法。

这是我的“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 不应该真正设置一个新的计时器)。