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

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

长度为零将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>