将一个元素移动到另一个元素中，其余元素将转到第三个位置

Move one element into another element with remaining elements going to a third location

本文关键字：元素 三个 余元素 位置 另一个 一个 移动      更新时间：2023-09-26

我正在尝试使用 moveButton 函数交换元素。当用户单击其中一个图像时，第一个图像将移动到 #gooddiv，然后任何剩余的图像都将进入 #evildiv。我有我认为会起作用的 if/else 语句。

<div id="character">
  <script type="text/javascript">
    function moveButton(elem){
        if( $(elem).parent().attr("id") == "menu" ){
            $(elem).detach().appendTo('#good');
        }
        else{
            $(elem).detach().appendTo('#evil'); 
        }
    }
  </script>    
</div>
<div id="good">
</div>
<div id="evil">
</div>
<div id="menu">
  <div class="character" onclick="moveButton(this)" data-name="Chomper">
    <p>Chomper</p><p><img width="100" src="http://vignette2.wikia.nocookie.net/plantsvszombies/images/a/a3/Chomper1.png/revision/latest?cb=20090521220057" alt=" + Chomper + "></p><p>Hit Points: 3.55</p>
  </div>
  <div class="character" onclick="moveButton(this)" data-name="Kernel-pult">
    <p>Kernel-pult</p><p><img width="100" src="http://vignette4.wikia.nocookie.net/plantsvszombies/images/c/c4/Kernel-pult1.png/revision/latest?cb=20090521220358" alt=" + Kernel-pult + "></p><p>Hit Points: 1.55</p>
  </div>
</div>

用布尔值一样的小提琴来控制你的 if

<script type="text/javascript">
  var good = false;
  function moveButton(elem) {
    if ($(elem).parent().attr("id") == "menu" && !good) {
      $(elem).detach().appendTo('#good');
    } else {
      $(elem).detach().appendTo('#evil');
    }
    good = true;
  }
</script>

将所有剩余的雕刻者送入邪恶使用$("#menu").find(".character").detach().appendTo('#evil');

就像在小提琴2中一样

<script type="text/javascript">
  var good = false;
  function moveButton(elem) {
    if ($(elem).parent().attr("id") == "menu" && !good) {
      $(elem).detach().appendTo('#good');
    } else {
      $(elem).detach().appendTo('#evil');
    }
    $("#menu").find(".character").detach().appendTo('#evil');
    good = true;
  }
</script>

不要将 THIS 传递给您的函数，它已经在作用域中。同样使用 detach（） 方法，您正在从 DOM 中删除元素。

function moveButton() {
    if( $(this).parent().attr("id") == "menu" ) {
        $(this).appendTo('#good');
    } else {
        $(this).appendTo('#evil'); 
    }
}
相关文章：