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

仅在触发第一个处理程序后附加敌方处理程序：

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

Answer 2

只需设置点击处理程序的外部变量即可处理是否已选择英雄，将其默认为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>

Jquery处理多个变量的click事件

2 个答案: