jQuery 中的函数激活次数过多

Question

我正在创建一个名为 Grape Clicker 的游戏，但是当我尝试购买一种名为 cotton candy grapes 的东西时，我设置的用于点击某个元素的功能会多次激活。我的 HTML 是：

我在jQuery中使用了点击方法并且效果很好（每次点击只触发一次），但现在它触发了几百次。

$(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

答案很简单。您将 //PROBLEMmatic 代码放置到 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>

jQuery 中的函数激活次数过多

Function in jQuery activates too many times

javascript

jquery

function

click