在 onclick 功能后需要帮助将 div 移动到另一个 div答案

【问题标题】：Need help in moving divs to another div after an onclick function在 onclick 功能后需要帮助将 div 移动到另一个 div
【发布时间】：2016-10-16 15:50:15
【问题描述】：

我有一个包含四个 div 的容器。在我点击一个 div 后，剩下的三个需要附加到另一个 div 上。我怎样才能做到这一点？

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

jQuery

    $(document).ready(function(){
       var yourCharacter;
       var enemy1;
       var enemy2;
       var enemy3;
      $('#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(){
      yourCharacter = $(this);
      $('#your').append(yourCharacter);
      enemy1 = $('.vader');
      $('#enemies').append(enemy1);

      })

      });

我需要将未点击的剩余 charContainers 附加到敌人容器 div 中

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

  })

【讨论】：

该方法会将我点击的第一个 div 附加到#your div 吗？而且，如果这行得通，我不需要enemy1 = $vader 任何泥潭，对吗？
你能把 varenemy1 这样分配给一个 div 类名并附加它吗？
没错。我删除了 vader 代码。此代码将所有 div 移动到 #enemies div，然后将您选择的 div 移动到 #your div。最终结果就是你想要的。唯一的缺点是做了少量的额外工作，因为选择的 div 被移动了两次。我喝了一些酒；我相信你可以处理剩下的。 :)
另外，不，您不能抓取一个类的所有元素，并将它们视为一个变量，即使只有一个具有该类名称的元素。使用编辑后的代码，而不是仍然有两个 .vader 行的代码。

【解决方案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 会导致更多的工作要做）

【讨论】：

我不熟悉语法'.characters>.charContainer'，这是什么意思？
@henhen '.characters' 的意思是'具有“字符”类的元素'。 '>' 表示“子级”，“.charContainer”表示“具有类“charContainer”的元素。总而言之，它意味着“具有类“charContainer”的元素是具有类“字符”的元素的子元素'
我刚刚注意到 .each 函数中的 char 参数
那个字符是做什么的，它是从哪里来的>
@henhen 你说的是我猜的箭头函数。 arrow function 与普通函数类似，但您可以使用x => code 或具有两个参数(x,y) => { ...code...} 的函数来代替function(x) { ...code... }。 jQuery .each() 函数可以接受两个参数。我用undefined 替换了第一个，因为我没有使用它。第二个我叫“char”

【解决方案3】：

你可以简单地使用 siblings()，像这样：

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

【讨论】：

appendTo 也更干净