Javascript jQuery按钮的传播问题

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

按钮1：“播放”。游戏播放十次，并使用我存储在本地存储器中的变量递增。如果增量匹配1到10之间的随机数，则

console.log（“匹配！”）

，否则

console，log（“不匹配”）

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

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

。我在下面粘贴的代码非常小：

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();
      });

    }
  })
}

开始游戏结束（）
功能启动\游戏结束（事件）{
$（“#按钮1”）.show（）；
$（“#按钮2”）.hide（）；
localStorage.setItem（“进度”，0）
$（“#按钮1”）。在（“单击”，函数（）上）{
if（parseInt（localStorage.getItem（“progress”））<11）{
var random_number=Math.floor（Math.random（）*（10-0）+0）；
log（parseInt（localStorage.getItem（“progress”））；
if（parseInt（localStorage.getItem（“progress”）==随机数）{
log（“匹配！”）
}否则{
console.log（“不匹配”）
}
localStorage.setItem（“进度”），parseInt（localStorage.getItem（“进度”））+1；
}否则{
$（“#按钮1”）.hide（）；
$（“#按钮2”）.show（）；
$（“#按钮2”）。在（“单击”，函数（）上）{
开始游戏结束（）；
});
}
})
}

当你

开始游戏时

你为按钮点击指定了一个事件监听器，但你从未删除它，因此当你再次调用该函数时，它会附加一个新的监听器。重新构造代码以处理该函数之外的点击是一个好主意

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();
});

功能启动\u游戏结束（事件）{
$（“#按钮1”）.show（）；
$（“#按钮2”）.hide（）；
localStorage.setItem（“进度”，0）
}
$（“#按钮1”）。在（“单击”，函数（）上）{
if（parseInt（localStorage.getItem（“progress”））<11）{
var random_number=Math.floor（Math.random（）*（10-0）+0）；
log（parseInt（localStorage.getItem（“progress”））；
if（parseInt（localStorage.getItem（“progress”）==随机数）{
log（“匹配！”）
}否则{
console.log（“不匹配”）
}
localStorage.setItem（“进度”），parseInt（localStorage.getItem（“进度”））+1；
}否则{
$（“#按钮1”）.hide（）；
$（“#按钮2”）.show（）；
}
})
$（“#按钮2”）。在（“单击”，函数（）上）{
开始游戏结束（）；
});

当你

开始游戏时

你为按钮点击指定了一个事件监听器，但你从未删除它，因此当你再次调用该函数时，它会附加一个新的监听器。重新构造代码以处理该函数之外的点击是一个好主意

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();
});

功能启动\u游戏结束（事件）{
$（“#按钮1”）.show（）；
$（“#按钮2”）.hide（）；
localStorage.setItem（“进度”，0）
}
$（“#按钮1”）。在（“单击”，函数（）上）{
if（parseInt（localStorage.getItem（“progress”））<11）{
var random_number=Math.floor（Math.random（）*（10-0）+0）；
log（parseInt（localStorage.getItem（“progress”））；
if（parseInt（localStorage.getItem（“progress”）==随机数）{
log（“匹配！”）
}否则{
console.log（“不匹配”）
}
localStorage.setItem（“进度”），parseInt（localStorage.getItem（“进度”））+1；
}否则{
$（“#按钮1”）.hide（）；
$（“#按钮2”）.show（）；
}
})
$（“#按钮2”）。在（“单击”，函数（）上）{
开始游戏结束（）；
});

您正在函数中声明事件侦听器，因此每次调用函数时，您都在创建一个新的侦听器。将它们移出函数，问题就解决了。

您在函数中声明事件侦听器，因此每次调用函数时，您都在创建一个新的侦听器。将它们移出函数，问题就解决了。

您必须使用

$（'#button1'）清除最后的
$（'#button1'）
事件。关闭（'click'）。这将清除每次在函数中创建的事件侦听器

SE不允许
localStorage
，因此请在JSFIDLE或本地计算机上运行此命令



开始游戏结束（）
功能启动\游戏结束（事件）{
$（“#按钮1”）.show（）；
$（“#按钮2”）.hide（）；
localStorage.setItem（“进度”，0）
$（“#按钮1”）。在（“单击”，函数（）上）{
if（parseInt（localStorage.getItem（“progress”））<11）{
var random_number=Math.floor（Math.random（）*（10-0）+0）；
log（parseInt（localStorage.getItem（“progress”））；
if（parseInt（localStorage.getItem（“progress”）==随机数）{
log（“匹配！”）
}否则{
console.log（“不匹配”）
}
localStorage.setItem（“进度”），parseInt（localStorage.getItem（“进度”））+1；
}否则{
$（“#按钮1”）.hide（）；
$（“#按钮2”）.show（）；
$（“#按钮2”）。在（“单击”，函数（）上）{
$（“#按钮1”）。关闭（“单击”）；
$（“#按钮2”）。关闭（“单击”）；
开始游戏结束（）；
});
}
})
}

玩
重新启动游戏
您必须使用
$（'#button1'）清除最后的
$（'#button1'）
事件。关闭（'click'）。这将清除每次在函数中创建的事件侦听器

SE不允许
localStorage
，因此请在JSFIDLE或本地计算机上运行此命令



开始游戏结束（）
功能启动\游戏结束（事件）{
$（“#按钮1”）.show（）；
$（“#按钮2”）.hide（）；
localStorage.setItem（“进度”，0）
$（“#按钮1”）。在（“单击”，函数（）上）{
if（parseInt（localStorage.getItem（“progress”））<11）{
var random_number=Math.floor（Math.random（）*（10-0）+0）；
log（parseInt（localStorage.getItem（“progress”））；
如果（p