Javascript 多变量单击事件的Jquery句柄

我设置了我的html，上面有4个英雄图片，用户可以点击它们作为自己的英雄或对手使用。就像街头斗士一样。因此，用户必须选择第一个英雄作为他们自己的玩家（在游戏的其余部分，这是他们自己的玩家）。其他3个英雄将成为用户的对手。用户可以选择首先与哪个对手作战。所以我设置了我的脚本，所有4个英雄都有相同的类“.herospic”。如何在选择第一个英雄（成为用户的玩家）后禁用点击事件？然后启用它，以便用户可以继续选择他们的对手？这是我的剧本

//player choose their hero
$(".heroes-pic").on("click", function() {

  player = heroes[$(this).attr("id")];
  //showing player
  $("#player img").attr('src', player.iconUrl);
  $("#player-damage").text('Damage: ' + player.damage);
  $("#player-hp").text('HP: ' + player.hp);
  $("#player").show();
  $(this).hide();
  $("#display-message").find("h2").text('Please Choose Your Opponent');
  $(".heroes-pic").off("click");
})

//player choose their opponent
$(".heroes-pic").on("click");
$(".heroes-pic").on("click", function () {

  enemy = heroes[$(this).attr("id")];
  //showing enemy
  $("#enemy img").attr('src', enemy.iconUrl);
  $("#enemy-counter-damage").text('Counter Damage: ' + enemy.counterDamage);
  $("#enemy-hp").text('HP: ' + enemy.hp);
  $("#enemy").show();
  $(this).hide();

})

---

只有在触发第一个处理程序后，才能连接敌人处理程序：

//player choose their hero
$(".heroes-pic").on("click", function() {

  player = heroes[$(this).attr("id")];
  //showing player
  $("#player img").attr('src', player.iconUrl);
  $("#player-damage").text('Damage: ' + player.damage);
  $("#player-hp").text('HP: ' + player.hp);
  $("#player").show();
  $(this).hide();
  $("#display-message").find("h2").text('Please Choose Your Opponent');
  $(".heroes-pic").off("click");

  //player choose their opponent
  $(".heroes-pic").on("click", pickEnemy);
});

function pickEnemy() {
  enemy = heroes[$(this).attr("id")];
  //showing enemy
  $("#enemy img").attr('src', enemy.iconUrl);
  $("#enemy-counter-damage").text('Counter Damage: ' + enemy.counterDamage);
  $("#enemy-hp").text('HP: ' + enemy.hp);
  $("#enemy").show();
  $(this).hide();
}

---

只需在单击处理程序的外部设置一个变量，以处理是否选择了英雄，并将其默认设置为

false

。然后在单击处理程序的内部，在第一次单击后将此标志设置为

true

。这样，

else

条件的逻辑将在后续单击时触发

这可以从以下几点看出：

让hero_selected=false；
让对手_选择=错误；
$（“.heros pic”）。在（“单击”，函数（）{
//玩家选择他们的英雄
如果（所选英雄===错误）{
console.log（'player choice'）；
选择的英雄=真实；
}
//玩家选择他们的对手
否则如果（选择的对手===错误）{
console.log（“对手选择”）；
选择的对手=正确；
}
//两种选择都有
否则{
log（'两个选项都已做出'）；
}
})

一个
两个
三
四个