javascript - 如何测试一个类是否包含在一个 div id 中

问题描述

我正在为编码训练营制作一个简单的口袋妖怪纸牌游戏，当玩家点击任何口袋妖怪 id（#pikachu等#squirtle）时，它会出现在一个名为的 div id 中#playerArea，点击的下一个口袋妖怪 id 应该出现在#defenderArea. 我需要测试是否有任何共享一个类的元素.pokemon在#playerArea使下一个被点击的口袋妖怪出现在#defenderArea

下面的 HTML 和脚本（不包括 css）

 <body>

        <header>
            <h1>Pokemon Stadium</h1>
        </header>

        <div id="selectionArea">
            <!-- pokemon cards share class but have their own IDs -->

            <div id="pikachu" class="pokemon">
                <img src="pikachu.png" height="200px" width="200px">
                <span id="pikachuHp">100</span>
                </div>


            <div id="bulbasaur" class="pokemon">
                    <img src="bulbasaur.jpg" height="200px" width="200px">
                    <span id="bulbasaurHp">200</span>
                </div>

            <div id="charmander" class="pokemon">
                    <img src="charmander.png" height="200px" width="200px">
                    <span id="charmanderHp">150</span>
                </div>

             <div id="squirtle" class="pokemon">
                    <img src="squirtle.jpg" height="200px" width="200px">
                    <span id="squirtleHp">120</span>
                </div>

            <div id="mario" class="pokemon">
                    <img src="mario.jpg" height="200px" width="200px">
                    <span id="marioHp">300</span>
                </div>



        </div>

        <!-- Enemies are moved here upon selection-->

        <div id="defenderArea">

        </div>

        <!-- The players pokemon goes here-->

        <div id="playerArea">

                <button type="button" id="attackBtn" class="btn btn-primary">Attack</button>

        </div>

        <!-- Scripts & jQuery -->


        <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <script>

  $(document).ready(function() {
    $('#pikachu').click(function() {  
        $("#pikachu").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#squirtle').click(function() {  
        $("#squirtle").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#charmander').click(function() {  
        $("#charmander").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#bulbasaur').click(function() {  
        $("#bulbasaur").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#mario').click(function() {  
        $("#mario").appendTo("#playerArea");
    });
});

    if ( $('#playerArea').hasClass(".pokemon") ) {
        //do something 
        alert("theres a pokemon in the playerArea");
    };
  </script>

我应该使用 if/else 语句来测试 playerArea 还是应该使用 if/else 来查看是否点击了 ID？

标签： javascriptjqueryhtml

javascript - 如何测试一个类是否包含在一个 div id 中

问题描述

解决方案

推荐阅读