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

答案很简单。您将//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>