jQuery中的函数激活太多次

Question

我正在创建一个名为Grape Clicker的游戏，但是当我尝试购买一种称为棉花糖葡萄的产品时，我为元素设置的功能会激活一次以上。 我的HTML是：

我在jQuery中使用了click方法，并且效果很好（每次单击仅触发一次），但是现在它触发了数百次。

$(document).ready(function() {
  var score = 0;
  var ccg = 0;
  var emoji = String.fromCodePoint(0x0001F347);

  $("img").click(function() {
    score++;
    $("#span1").text(emoji + score + emoji);
    if (score >= 10 && score < 50) {
      $("#span1").css("color", "red");
    } else if (score >= 50 && score < 100) {
      $("#span1").css("color", "orange");
    } else if (score >= 100 && score < 500) {
      $("#span1").css("color", "yellow");
    } else if (score >= 500 && score < 1000) {
      $("#span1").css("color", "green");
    } else if (score >= 1000 && score < 5000) {
      $("#span1").css("color", "lime");
    } else if (score >= 5000 && score < 10000) {
      $("#span1").css("color", "blue");
    } else if (score >= 10000) {
      $("#span1").css("color", "purple");
    }

    if (score == 10) {
      alert("Achivement: 10");
    } else if (score == 50) {
      alert("Achivement: 50");
    } else if (score == 100) {
      alert("Achivement: 100");
    } else if (score == 500) {
      alert("Achivement: 500");
    } else if (score == 1000) {
      alert("Achivement: 1,000");
    } else if (score == 5000) {
      alert("Achivement: 5,000");
    } else if (score == 10000) {
      alert("Achivement: 10,000");
    }

    //PROBLEM
    $("#ccgS").click(function() {
      if (score > 10) {
        ccg++;
        score -= 10;
        $("#ccgNum").text(emoji + ccg + emoji);
        $("#span1").text(emoji + score + emoji);
      } else {
        alert("NOT ENOGUH GRAPES");
      }
    });
  });
});

#span2 {
  color: purple;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="text"><span id="span1">Click the grapes!</span><span id="span2"><span id="ccgS">Cotton Candy Grapes</span><br><span id="ccgNum">0</span></span>
</h1>
<img src="images/grapes.png" height="25%" width="25%">
<p>0-9 - black<br>10-49 - red<br>50-99 - orange<br>100-499 - yellow<br>500-999 - green<br>1,000-4,999 - lime<br>5,000-9,999 - blue<br>10,000+ - purple<br>To buy a cotton candy grape press "Cotton Candy Grapes".<br>Cotton candy grapes cost 10 grapes<br>If
  you reload the page you lose all progress.</p>

我希望当用户单击ID为“ ccgS”的元素时，该功能将触发一次，而不是一千次。

Answer 1

答案是 非常简单 。您将//PROBLEM数学代码放置到onclick事件侦听器中。

因此，单击葡萄图像的次数就很多，向#ccgS元素添加了许多事件侦听器，并且在单击时出现了许多对话框。

$(document).ready(function() {
  var score = 0;
  var ccg = 0;
  var emoji = String.fromCodePoint(0x0001F347);

  $("img").click(function() {
    score++;
    $("#span1").text(emoji + score + emoji);
    if (score >= 10 && score < 50) {
      $("#span1").css("color", "red");
    } else if (score >= 50 && score < 100) {
      $("#span1").css("color", "orange");
    } else if (score >= 100 && score < 500) {
      $("#span1").css("color", "yellow");
    } else if (score >= 500 && score < 1000) {
      $("#span1").css("color", "green");
    } else if (score >= 1000 && score < 5000) {
      $("#span1").css("color", "lime");
    } else if (score >= 5000 && score < 10000) {
      $("#span1").css("color", "blue");
    } else if (score >= 10000) {
      $("#span1").css("color", "purple");
    }

    if (score == 10) {
      alert("Achivement: 10");
    } else if (score == 50) {
      alert("Achivement: 50");
    } else if (score == 100) {
      alert("Achivement: 100");
    } else if (score == 500) {
      alert("Achivement: 500");
    } else if (score == 1000) {
      alert("Achivement: 1,000");
    } else if (score == 5000) {
      alert("Achivement: 5,000");
    } else if (score == 10000) {
      alert("Achivement: 10,000");
    }
  });
  
    //PROBLEM
    $("#ccgS").click(function() {
      if (score >= 10) {
        ccg++;
        score -= 10;
        $("#ccgNum").text(emoji + ccg + emoji);
        $("#span1").text(emoji + score + emoji);
      } else {
        alert("NOT ENOGUH GRAPES");
      }
    });
});

#span2 {
  color: purple;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="text"><span id="span1">Click the grapes!</span><span id="span2"><span id="ccgS">Cotton Candy Grapes</span><br><span id="ccgNum">0</span></span>
</h1>
<img src="images/grapes.png" height="25%" width="25%">
<p>0-9 - black<br>10-49 - red<br>50-99 - orange<br>100-499 - yellow<br>500-999 - green<br>1,000-4,999 - lime<br>5,000-9,999 - blue<br>10,000+ - purple<br>To buy a cotton candy grape press "Cotton Candy Grapes".<br>Cotton candy grapes cost 10 grapes<br>If
  you reload the page you lose all progress.</p>