javascript - jQuery 按钮的传播问题

Question

我创建了一个由两个按钮操作的 javascript/jquery 简单游戏。

按钮 1:“玩”。游戏会玩十次，并使用我存储在本地存储中的变量递增。如果增量匹配 1 到 10 之间的随机数，则 console.log("match!")，否则 console,log("no match");

按钮2:“重新开始游戏”。一旦增量大于10，则单击该按钮重新开始游戏。

问题是，如果您查看控制台，您第二次玩游戏时，游戏会一次跳跃两个增量。第三次，增加三次……这是为什么？这里有一个传播问题。怎么解决？

Jsfiddle is here 。我将代码粘贴在下面，因为它非常小:

start_game_over()

function start_game_over(event) {
  $("#button1").show();
  $("#button2").hide();

  localStorage.setItem("progress", 0)

  $("#button1").on("click", function() {

    if (parseInt(localStorage.getItem("progress")) < 11) {

      var random_number = Math.floor(Math.random() * (10 - 0) + 0);
      console.log(parseInt(localStorage.getItem("progress")));
      if (parseInt(localStorage.getItem("progress")) === random_number) {
        console.log("match!")
      } else {
        console.log("no match")
      }

      localStorage.setItem("progress", parseInt(localStorage.getItem("progress")) + 1);

    } else {
      $("#button1").hide();
      $("#button2").show();
      $("#button2").on("click", function() {
        start_game_over();
      });

    }
  })
}

Answer 1

当您start_game_over时，您为按钮单击分配了一个事件监听器，但您从未将其删除，因此当您再次调用该函数时，它会附加一个新的事件监听器。稍微重组一下代码来处理该函数之外的点击将是一个好主意。

function start_game_over(event) {
  $("#button1").show();
  $("#button2").hide();

  localStorage.setItem("progress", 0)
}
$("#button1").on("click", function() {

    if (parseInt(localStorage.getItem("progress")) < 11) {

      var random_number = Math.floor(Math.random() * (10 - 0) + 0);
      console.log(parseInt(localStorage.getItem("progress")));
      if (parseInt(localStorage.getItem("progress")) === random_number) {
        console.log("match!")
      } else {
        console.log("no match")
      }

      localStorage.setItem("progress", parseInt(localStorage.getItem("progress")) + 1);

    } else {
      $("#button1").hide();
      $("#button2").show();

    }
  })
$("#button2").on("click", function() {
    start_game_over();
});