Question

我刚刚开始编码并决定在我开始更深入地完全编码之前搞砸了。我目前正在尝试制作一个简单的游戏，你单击一个对象，它会做一个小动画，它会向计数器添加1个。

我完美地执行了动画，但是我完全迷失了如何制作计数器。我试图通过标签使用.js，主要是因为网站从不加载我的script.js文件，即使我正确引用它。

无论如何这里是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <h3>0 Clicks</h3>
    <img id="choco" src="http://cdn.shopify.com/s/files/1/0210/5354/products/Chocolate_Chip_No_Background_1_medium.png?v=1365686508">
    <img id="whirl" src="whirl.jpg" style="width:25em; height:25em;">
</body>
<script>    
$(document).ready(function() {
    ('#cookie').click(function() {
        function toClick(clicks){
            return (clicks + 1);
        print clicks;
        };
    });
});
</script>
</html>

我非常凌乱，我尝试过多种方法试图让它发挥作用，但事实并非如此。

所以基本上我想要做的是每次我点击我想要它的对象将1加到我在页面上的计数器上。

0点击

我甚至不确定这是可能的，但我希望有人可以帮助我：）

谢谢！

Answer 1

首先，给你的h3一个包含点击计数器的内部元素（并给出一个ID，以便你可以轻松访问它）：

<h3><span id="clicks">0</span> clicks</h3>

接下来 - 您的点击处理程序缺少前面的$ - 但也必须获取当前点击次数，添加1，然后重新打印：

$('#cookie').click(function() {
    var currentClicks = parseInt($("#clicks").text(), 10);
    currentClicks++; //increment

    $("#clicks").text(currentClicks); //set it
});

Answer 2

    $(document).ready(function() {
        $('#cookie').click(function() {
           incrementCount();
        });
    });

  function incrementCounter() {
          var previousCounter = parseInt($("#counter").text());
          previousCounter = isNaN(previousCounter) ? 0: ++previousCounter;

          $("#counter").text(previousCounter);
  }

  function resetCounter() {
     $("#counter").text(0);
 }

将HTML更改为

<body>
    <h3><span id="counter">0</span> Clicks</h3>

即使您没有使用Span指定0，上面的代码也会照顾。我刚刚给你一些奖励功能 - resetCounter：）

Answer 3

似乎你错过了$ sing in：

    $('#cookie').click(function() {

0点击

3 个答案: