Javascript 将图像附加到div jquery_Javascript_Jquery_Html

Javascript 将图像附加到div jquery

javascript jquery html

Javascript 将图像附加到div jquery,javascript,jquery,html,Javascript,Jquery,Html,我有一个div容器，它包含4个以上的div，每个div都有一个标题、图像和一个段落标记。我正在做的是一个游戏，当我点击其中一个div，images时，剩下的3个没有点击的图像移动到另一个div部分，其中包含一类“敌人”。如果每个角色都没有一堆onclick函数，我怎么做呢 <!DOCTYPE html> <html lang="en"> <head> <title>Week 4 Game</title&

我有一个div容器，它包含4个以上的div，每个div都有一个标题、图像和一个段落标记。我正在做的是一个游戏，当我点击其中一个div，images时，剩下的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>

我正在尝试将

.charContainer

，

.charContainer1

，

.charContainer2

，

.charContainer3

中的任何一个（包括标题，

和

标记）移动到带有id

\code>的

更新：我通过为charContainer执行.each函数找到了一个解决方案。我没有使用4个不同的CharContainer，而是将它们命名为同一个类。在.each函数中，对于这些没有附加到所选字符框的类，我添加了一个名为.foes的类，以便现在可以区分已“选择”的div还有那些没有的。
我相信您的错误是“charContainer”（1,2,3,4）有不同的类。在您的情况下，事件应该如下所示
 $('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){

还有你这样做的方式-你将添加多个字符点击他们一个接一个。这个怎么样：

$（函数（）{
$（'.charContainer'）。在（'click'，function（）上{
var yourCharacter=$（这个）；
$（'#your'）.empty（）.append（yourCharacter.clone（））；
});
});

达斯维达

卢克·天行者

欧比旺

达斯摩尔

你的性格
我尝试为每个字符使用onclick函数和一组if-else。您可以为类的所有div分配onclick函数，并使用此动态实现所需的行为。共享一些代码，以便其他人更容易解决您的问题。好的，我会这样做，但是我以前的代码是有效的，当我单击选中的on-click-div类时，但只有当我单击div的div部分时才有效。我如何使它在单击此div内的任何位置时，它会移动到那里。我在这个div中有一个h2标记、p标记和一个图像，但是onclick函数不会响应，除非我在div框的边缘附近单击。只有在单击第一个div上的某个位置时，前面的代码才会起作用，因为$（'.charContainer'）仅选择第一个div。按照我告诉你的更改代码，它就会工作。另外，正如你从我的片段中看到的，它在你点击的任何地方工作-在图像周围的空白空间中的H2，图像。你可能需要读一些关于泡沫的书。
 $('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){