Question

我有一个on.click，但是我希望它仅在#battle包含#obiWanPicked和#darthMaul的情况下运行。无论出于什么原因，无论如何，它似乎都忽略了if语句并运行了click。

我的大多数html内容都是使用JavaScript动态创建的，这就是为什么我在处理动态创建的对象时开始使用.on而不是.click的原因。

if ($("#battle").has("#obiWanPicked") && $("#battle").has("#darthMaul")) {
  $("#battle").on("click", "#attack", function () {
    if(darthMaulStats.healthPoints <= 0){
      $("#darthMaul").remove();

      alert("You win!");
    }
    darthMaulStats.healthPoints = darthMaulStats.healthPoints - obiWanStats.attackPower;
    obiWanStats.attackPower = obiWanStats.attackPower + 15;
    $("#darthMaul").text(darthMaulStats.healthPoints); 
    obiWanStats.healthPoints = obiWanStats.healthPoints - 5;
    $("#obiWanPicked").text(obiWanStats.healthPoints); 
    console.log(obiWanStats);
    $('#yourFighters').remove();

  });
}

以上所有代码

<div id="gameModule">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">

      <div id="allFighters">Pick your Fighter!<br /></br>
      <div id="obiWan">
        <h2>120</h2>
      </div>
      <div id="darthMaul">
        <h2>150</h2>
      </div>
      <div id="hanSolo">
        <h2>100</h2>
      </div>
      <div id="maceWindu">
        <h2>200</h2>
      </div>
    </div>
  </div>
  <div id="col-2"></div>
</div>

<div id="row">

  <div id="yourFighters"></br>Your Pick<br></div>

</div>
<div id="row">

  <div id="enemyFighters">Your Enemies: Click to fight<br></div>

</div>
<div id="row">

  <div id="battle">Time to Battle!</br><br></div>

</div>
<div id="row">

</div>
</div>

</div>
</div>

<div class="row">
  <div class="col">
    <div class="footer">
      <br />
      FOOTER
    </div>
  </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
  var allFighters = $('#allFighters');
  var yourFighters = $('#yourFighters');
  var enemyFighters = $('#enemyFighters');
  var battle = $('#battle');
  var obiWan = $('#obiWan');
  var darthMaul = $('#darthMaul');
  var darthMaulBattle = $('#darthMaulBattle');
  var hanSolo = $('#hanSolo');
  var maceWindu = $('#maceWindu');
  var attack = $('#attack')
  var obiWanStats = {
    healthPoints: 120,
    attackPower: 15,
    counterAttackPower: 14,
  };

  var darthMaulStats = {
    healthPoints: 150,
    attackPower: 15,
    counterAttackPower: 14,
  };

  var hanSoloStats = {
    healthPoints: 100,
    attackPower: 15,
    counterAttackPower: 14,
  };

  var maceWinduStats = {
    healthPoints: 200,
    attackPower: 15,
    counterAttackPower: 14,
  };

  console.log(maceWinduStats.healthPoints);

  obiWan.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='obiWan'>120</div><h1>");
    enemyFighters.append("<div id='darthMaul'>150</div>");
    enemyFighters.append("<div id='hanSolo'>100</div>");
    enemyFighters.append("<div id='maceWindu'>200</div>");
    battle.append("<div id='obiWanPicked'>" + obiWanStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");

  });
  darthMaul.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='darthMaul'>120</div>");
    enemyFighters.append("<div id='obiWan'>150</div>");
    enemyFighters.append("<div id='hanSolo'>100</div>");
    enemyFighters.append("<div id='maceWindu'>200</div>");
    battle.append("<div id='darthMaulPicked'>" + darthMaulStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
  });
  hanSolo.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='hanSolo'>120</div>");
    enemyFighters.append("<div id='darthMaul'>150</div>");
    enemyFighters.append("<div id='obiWan'>100</div>");
    enemyFighters.append("<div id='maceWindu'>200</div>");
    battle.append("<div id='hanSoloPicked'>" + hanSoloStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
  });
  maceWindu.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='maceWindu'>120</div>");
    enemyFighters.append("<div id='darthMaul'>150</div>");
    enemyFighters.append("<div id='hanSolo'>100</div>");
    enemyFighters.append("<div id='obiWan'>200</div>");
    battle.append("<div id='maceWinduPicked'>" + maceWindu.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline;'>VERSUS");
  });


  $("#enemyFighters").on("click", "#darthMaul", function () {
    $(this).remove();
    console.log("meme");

    battle.append("<div id='darthMaul' style='float: none; margin-left: 50%; margin-top: -35px;'>" + darthMaulStats.healthPoints + "</div><div id='attack'>Attack!</div>");

  });

  $("#enemyFighters").on("click", "#hanSolo", function () {
    $(this).remove();
    console.log("meme");
    battle.append("<div id='hanSolo' style='float: none; margin-left: 50%; margin-top: -35px;'>" + hanSoloStats.healthPoints + "</div><div id='attack'>Attack!</div>");
  });

  $("#enemyFighters").on("click", "#maceWindu", function () {
    $(this).remove();
    console.log("meme");
    battle.append("<div id='maceWindu' style='float: none; margin-left: 50%; margin-top: -35px;'>" + maceWinduStats.healthPoints + "</div><div id='attack'>Attack!</div>");
  });

  $("#enemyFighters").on("click", "#obiWan", function () {
    $(this).remove();
    console.log("meme");
    battle.append("<div id='obiWan' style='float: none; margin-left: 800px; margin-top: -35px;'>" + obiWanStats.healthPoints + "</div><div id='attack'>Attack!</div>");
  });

Answer 1

不确定此处...我的回复很快。但我从中了解您的问题：

我希望它仅在#battle包含#obiWanPicked和#darthMaul
时运行

现在click处理程序已在页面加载中注册，其中存在（我想）两个要检查是否存在的ID。

在click处理程序中移动该条件！

$("#battle").on("click", "#attack", function () { if ($("#battle").has("#obiWanPicked").length && $("#battle").has("#darthMaul").length) { if(darthMaulStats.healthPoints <= 0){ //...

因此，将在每个click上检查条件，而不是仅在处理程序注册时进行检查。

;）

showdev提到了一个很好的观点...在.length之后添加has()，因此条件将根据长度而不是对象进行求值。

零长度的值为false。其他任何长度的计算结果为true。

Answer 2

也许您正在尝试做这样的事情。使用查找和测试长度应该可以。

/* Maybe you are trying to do something like this. Using find and testing the length should work. */
$("#battle").on("click", "#attack", function () {
  if ($("#battle").find("#obiWanPicked").length > 0 && $("#battle").find("#darthMaul").length > 0){     
       console.log("You win!");
  } else {
    console.log("You Lose!");
  }
});

/* Just for testing */
$("body").on("click", "#toggleObiwan", function(){
  if($("#battle").find("#obiWanPicked").length > 0){
    $("#obiWanPicked").remove();
  } else {
    $("#battle").append("<div id='obiWanPicked'>O</div>");
  }
});

$("body").on("click", "#toggleDarthMaul", function(){
  if($("#battle").find("#darthMaul").length > 0){
    $("#darthMaul").remove();
  } else {
    $("#battle").append("<div id='darthMaul'>D</div>");
  }
});

#battle {
  width: 200px;
  height: 100px;
  background: green;
}

#obiWanPicked {
  width: 20px;
  height: 20px;
  background: skyblue;
  line-height: 20px;
  margin: 5px;
}

#darthMaul {
  width: 20px;
  height: 20px;
  background: red;
  line-height: 20px;
  margin: 5px;
}

button {
  width: 100px;
  font-size: 11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button id="toggleObiwan">TOGGLE OBIWAN</button>
<button id="toggleDarthMaul">TOGGLE DARTH MAUL</button>

<div id="battle">
<button id="attack">ATTACK</button>
   <div id="obiWanPicked">O</div>
   <div id="darthMaul">D</div>
</div>

.click仅当div包含2个特定div时

2 个答案: