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>