Question

我有div容器，它还包含4个div，每个div都有一个标题，图像和一个段落标记。我正在做的是一个游戏，当我点击其中一个div，图像时，剩下的3个未被点击的图像移动到另一个div部分，带有一类“敌人”。如果没有每个角色的一堆onclick函数，我该怎么做？

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Week 4 Game</title>
        <link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">

        <!-- Added link to the jQuery Library -->
        <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src = "assets/javascript/game.js">    </script>

    </head>
    <body>
    <div class = "characters">
    <div class="charContainer">
        <h2 id="c1"></h2>
        <img class="vade" src="assets/images/vader.jpg">
        <p id="c1hp" data-hp = "120"></p>
    </div>
    <div class="charContainer1">
        <h2 id="c2"></h2>
        <img class="skywalker" src="assets/images/luke.jpg">
        <p id="c2hp" data-hp = "100"></p>
    </div>
    <div class="charContainer2">
        <h2 id="c3"></h2>
        <img class="obi" src="assets/images/obiwan.jpg">
        <p id="c3hp" data-hp = "150"></p>
    </div>
    <div class="charContainer3">
        <h2 id="c4"></h2>
        <img class="dmaul" src="assets/images/maul.png">
        <p id="c4hp" data-hp = "180"></p>
    </div>
    </div>
    <div id="your">
    <h2>Your Character</h2>
    <!-- <img class="dmaul" src="assets/images/maul.png"> -->
    </div>
    </body>
    </html>

的jQuery

    $(document).ready(function(){
        $('#c1').text("Darth Vader");
        $('#c2').text("Luke Skywalker");
        $('#c3').text("Obi Won");
        $('#c4').text("Darth Maul");
        var health = $('#c1hp').data('hp');
        $('#c1hp').html(health);
        var health = $('#c2hp').data('hp');
        $('#c2hp').html(health);
        var health = $('#c3hp').data('hp');
        $('#c3hp').html(health);
        var health = $('#c4hp').data('hp');
        $('#c4hp').html(health);

        $('.charContainer').on('click', function(){
            var yourCharacter = $(this);
            $('#your').append(yourCharacter);
        });

    });

我正在尝试移动<div> .charContainer .charContainer1，.charContainer2，.charContainer3，<img>中的任何人，包括标题<p>和其中<div>标记为#your，标识为OleDbDataReader reader = cmd.ExecuteReader();。

更新：我通过为charContainer执行.each函数找到了一个解决方案。而不是有4个不同的charContainers，我只是将它们命名为相同的类和.each函数，对于没有附加到所选字符框的每个类，我添加了一个名为.foes的类，以便我可以现在区分已经“选中”的div和没有选择的div。

Answer 1

我相信你的错误是你有＃34; charContainer＆＃34; （1,2,3,4）。在您的情况下，事件应该看起来像

 $('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){

此外，您还可以添加多个字符，一个接一个地点击它们。怎么样：

＆＃13;

$(function() {
    $('.charContainer').on('click', function(){
      var yourCharacter = $(this);
      $('#your').empty().append(yourCharacter.clone());
    });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
    <div class="charContainer">
        <h2 id="c1">Darth Vader</h2>
        <img class="vader" src="assets/images/vader.jpg">
        <p id="c1hp" data-hp = "120"></p>
    </div>
    <div class="charContainer">
        <h2 id="c2">Luke Skywalker</h2>
        <img class="skywalker" src="assets/images/luke.jpg">
        <p id="c2hp" data-hp = "100"></p>
    </div>
    <div class="charContainer">
        <h2 id="c3">Obi Wan</h2>
        <img class="obiwan" src="assets/images/obiwan.jpg">
        <p id="c3hp" data-hp = "150"></p>
    </div>
    <div class="charContainer">
        <h2 id="c4">Darth Maul</h2>
        <img class="dmaul" src="assets/images/maul.png">
        <p id="c4hp" data-hp = "180"></p>
    </div>
    </div>
    <div id="your">
    <h2>Your Character</h2>
    </div>

＆＃13;

将图像附加到div jquery

1 个答案: