javascript - .on(click - 在增加分数时显示新图像 - jQuery

Question

这是我的 jfiddle.当我运行它时，它看起来不正确。当我在 Firefox 中单击“开始”时，计时器开始计时并出现 Mole。每次我点击开始时都会出现一个新的，只是当我点击地鼠时不会出现，而且分数没有改变

我希望这不是太宽泛，我不知道如何区分这个问题。

javascript 的打地鼠游戏/jquery类(class)。我必须保留它，以便在单击“开始”按钮时出现“地鼠”，并且每次单击“地鼠”时都会出现一个新的地鼠。每点击一次分数就会上升一个。

说明说要使用 .on() 并将其放入 .ready() 函数中。我应该在此过程中调用我的递增函数。

     $(document).ready(function(){
        $("#start_button").click(function(){
            start();
            run();
        }); //end start button
        $("<img src='img/mole.png' />").on("click", function(){
            incScore();
            addMole();
        }); //end.on
    }); //end.ready
    function start(){
        $("#timer").show();
        addMole()
    }; //end start 

Answer 1

只要 addMole 和 incScore 能正常工作，我认为您已经很接近了。您的 img 选择器看起来不太正确，理想情况下，您应该向痣图像添加一个类(例如“mole-img”)，这样您就可以制作这样的选择器 $('.mole-img' ).on('点击', ...)

如果您想调用多个函数，您可以为点击处理程序提供一个匿名函数，每次点击地鼠时都会执行该函数。 (就像#start_button 处理程序一样)

我不认为你想把鼠标点击的处理程序放在#start_button 处理程序中，所以我把它移到了外面。

start 函数也可以在$(document).ready 中，你可以在其中定义任意多个函数。可能想要将所有代码放入其中。

如果我们把这些东西放在一起，它会是这样的

$(document).ready(function(){
  $("#start_button").click(function(){
    start();
    run();
  });

  $('.mole-img').on('click', function(){
    addMole();
    incScore();
  });

  function start() {
    $("#timer").show();
    addMole();
  }
});

如果你不想给你的 img 添加一个类，$("img[src='img/mole.png']").on... 也可以，但这似乎更容易在以后中断。

fiddle 笔记:

将 moleImg 从一个 id 更改为一个类。不确定您是否可以同时激活多个地鼠，ID 应该是唯一的，为了安全起见，我使用的是类。

setTimeout 采用一个函数而不是一个字符串，函数后不需要括号。 setTimeout("run()", 1000); --> setTimeout(run, 1000);

点击处理程序需要以不同的方式编写，因为它们应该触发稍后添加的内容。当声明痣点击处理程序时，屏幕上没有痣。
下面是编写处理程序以使其监听稍后将添加的元素的方法:

$("要查看的容器").on("点击", "元素选择器", function(){

将其应用于#gamespace 和 moleImg 选择器，我们得到:

$("#gamespace").on("点击", '.moleImg', function() {

这应该会让你继续前进，你可能想将 $("gamespace").empty() 添加到你的 addMole 函数中，这样它们就不会堆积起来。

要让它们随机显示，请查看 css position: absolute、left、top 属性以及 Math.random