Дескриптор Jquery для события click для нескольких переменных

Question

Я установил свой HTML с изображениями 4 героев наверху, которые пользователь может щелкнуть, чтобы использовать в качестве своего собственного героя или своего противника. Это как уличный боец. Таким образом, пользователь должен выбрать первого героя, который будет его собственным игроком (и это будет его собственный игрок для остальной части игры). Остальные 3 героя станут противниками пользователя. И пользователь может выбрать, с каким противником бороться первым. Поэтому я настроил свой сценарий, чтобы все 4 героя имели один и тот же класс ".heroes-pic". Как отключить событие при нажатии после того, как был выбран первый герой (чтобы стать игроком пользователя)? А затем включить его, чтобы пользователь мог продолжать выбирать своего противника? Вот мой сценарий

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