Jquery对多变量单击事件的处理

Question

我设置了我的html与4个英雄图片在顶部，用户可以点击使用作为他们自己的英雄或他们的对手。就像街头拳击手的交易。因此，用户必须选择第一个英雄成为他们自己的玩家(这是他们自己的玩家在游戏的其余部分)。其他3位英雄将成为用户的对手。用户可以选择哪个对手先打。因此，我设置了我的脚本，所有四个英雄都有相同的类“。英雄-图片”。如何在第一个英雄被选中后(作为用户的播放器)禁用on事件？然后启用它，以便用户可以继续选择他们的对手？这是我的剧本

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

})

Answer 1

只需在单击处理程序的外部设置一个变量，以处理英雄是否已被选中，并将其默认为false。然后，在单击处理程序的内部，在第一次单击之后将此标志设置为true。这样，else条件的逻辑将在随后的单击时触发。

这可以从以下几个方面看到：

​

let hero_chosen = false;
let opponent_chosen = false;

$(".heroes-pic").on("click", function() {
  // player choose their hero
  if (hero_chosen === false) {
    console.log('player choice');
    hero_chosen = true;
  }
  // player choose their opponent
  else if (opponent_chosen === false) {
    console.log('opponent choice');
    opponent_chosen = true;
  }
  // both choices are made
  else {
    console.log('both choices have already been made');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="heroes-pic">One</div>
<div class="heroes-pic">Two</div>
<div class="heroes-pic">Three</div>
<div class="heroes-pic">Four</div>

​

Answer 2

只在触发第一个处理程序之后才附加敌人处理程序：

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