Question

这是我 jfiddle.我跑的时候看起来不对。当我在Firefox中单击“开始”时，计时器开始关闭并显示Mole。每次点击开始时都会出现一个新的，只是当我点击鼹鼠时，并且得分没有改变

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

javascript / jquery课程的傻瓜游戏。我必须保持它，以便在单击开始按钮时出现鼹鼠，并且每次单击鼹鼠时都会出现新的鼹鼠。每次点击，分数上升一个。

说明说使用.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选择器看起来不是很正确，理想情况下你应该在鼹鼠图像中添加一个类（＆＃34; mole-img＆＃34;例如），这样你就可以制作一个这样的选择器{{1} }

如果要调用多个函数，可以为click处理程序提供一个匿名函数，每次单击mole时都会执行该函数。（就像#start_button处理程序一样）

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

start函数也可以在$('.mole-img').on('click', ...)内，您可以根据需要定义其中的任意数量的函数。可能想把你所有的代码都放在里面。

如果我们将这些东西放在一起，它就会像这样

$(document).ready

如果你不想在你的img中添加一个类，$(document).ready(function(){ $("#start_button").click(function(){ start(); run(); }); $('.mole-img').on('click', function(){ addMole(); incScore(); }); function start() { $("#timer").show(); addMole(); } });也可能有效，但这似乎更容易在以后破解。

小提琴的注释：

将idImg从id更改为class。不确定你是否可以同时激活多个鼹鼠，ids应该是唯一的，这样才能安全我正在使用课程。

$("img[src='img/mole.png']").on...使用的函数不是字符串，在函数后不需要括号。 setTimeout - ＆gt; setTimeout("run()", 1000);

点击处理程序当它们应该触发稍后将添加的内容时，需要稍微写一些。当宣布鼹鼠点击处理程序时，屏幕上没有痣以下是编写处理程序以使其侦听稍后将添加的元素的方法：

setTimeout(run, 1000);

将它应用于#gamespace和moleImg选择器，我们得到这个：

$("container to look in").on("click", "element selector", function(){

这应该让你继续前进，你可能想要将$("#gamespace").on("click", '.moleImg', function() {添加到你的addMole函数中，这样他们就不会继续堆积。

要让他们随机查看css $("gamespace").empty()，position: absolute，left属性以及top

.on（点击 - 在增加分数时显示新图像 - jQuery

1 个答案: