将图像附加到div jquery

-1

我有div容器，可容纳4个div，每个div都有一个标题，图像和一个段落标记。我制作的是一款游戏，当我点击其中一个div，图像时，其余3个未点击的图像移动到另一个div类的“敌人”类别。我如何做到这一点，而不需要为每个角色提供一堆onclick函数？将图像附加到div jquery

<!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>与ID #your。

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

来源

2016-10-16 henhen

我试着只是有每个字符的onlclick功能和一堆，如果别人的内部 – henhen

你可以指定一个onclick函数类的所有div和使用'这'动态地实现所需的行为。 – Jecoms

分享一些代码，以便其他人更容易解决您的问题。 –

我相信你的错误是你有“charContainer”（1,2,3,4）的不同类。在你的情况下，事件应该看起来像

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

另外你的方式 - 你会添加多个字符点击他们一个接一个。这个怎么样：

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

<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>

来源

2016-10-16 05:12:47 nsimeonov

好吧，我会这样做，但我以前的代码工作，当我点击所选的点击div类，但只有当我点击div的div部分。我怎么做到这一点，当我点击这个div内的任何地方时，它会移动到那里。我有一个h2标签，p标签和一个图像都在这个div中，但是onclick函数不会响应，除非我点击div框的边缘 – henhen

以前的代码只有在第一个div上点击某处时才起作用，因为$（ '.charContainer'）只选择第一个。按照我的说法改变代码，它会起作用。也可以从我的代码片段中看到 - 它可以在任何地方点击 - h2图像，图像周围空白处的某处。您可能需要阅读一些关于偶数泡泡的内容。 – nsimeonov

将图像附加到div jquery

回答

相关问题