Question

我有一个装有四个div的容器。点击一个div后，其余三个需要附加到另一个div。我怎样才能做到这一点？

welcome,to

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 darth">
        <h2 id="c1"></h2>
        <img class="vade" src="assets/images/vader.jpg">
        <p id="c1hp" data-hp = "120"></p>
    </div>
    <div class="charContainer luke">
        <h2 id="c2"></h2>
        <img class="skywalker" src="assets/images/luke.jpg">
        <p id="c2hp" data-hp = "100"></p>
    </div>
    <div class="charContainer won">
        <h2 id="c3"></h2>
        <img class="obi" src="assets/images/obiwan.jpg">
        <p id="c3hp" data-hp = "150"></p>
    </div>
    <div class="charContainer maul">
        <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>
    <div id="enemies">
    <h2>Enemies</h2>
    <!-- <img class="dmaul" src="assets/images/maul.png"> -->
    </div>


    </body>
    </html>

我需要将未点击的重新绑定的charContainers附加到敌人容器div

Answer 1

这对我有用。你可能想要添加一个相等的检查，因为所选的div最初将附加到敌人，然后移动：

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

  })

Answer 2

由于“你的角色”在其他角色需要移动时已被移动，因此选择器'.characters>.charContainer'（“角色”的所有“charContainer”子节点）都不会选择你的角色（因为它已经移动了） - 只剩下剩下的字符

$('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each(function() {
        $('#enemies').append($(this));
    });
})

使用箭头功能的替代版本：

$('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each( (undefined, char) => { $('#enemies').append($(char)) } );
})

借用Tekebo使用appendTo：

$('.charContainer').on('click', function() {
    $(this).appendTo('#your');
    $('.characters>.charContainer').appendTo('#enemies');
})

注意：使用子选择器而不是单击的div的兄弟节点或'charContainer'类的所有div的主要优点是它完成的顺序无关紧要 - 结果将是相同的。（但是，最后移动单击的div将导致更多工作）

Answer 3

您可以简单地使用兄弟姐妹（），如下所示：

$(document).ready(function(){
  $(".charContainer").on("click",function(){
    $(this).siblings().appendTo("#enemies");
    $(this).appendTo("#your");
  });
});

在onclick函数之后需要帮助将div移动到另一个div

3 个答案: