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

我试图用moveButton函数交换元素。当用户单击其中一个图像时，会将第一个图像移动到“good”div，然后剩余的图像将进入“evil”div。我认为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>

功能移动按钮（elem）{
if（$（elem）.parent（）.attr（“id”）=“菜单”）{
$（elem）.detach（）.appendTo（'#good'）；
}
否则{
$（elem）.detach（）.appendTo（'#evil'）；
}
}
Chomper的生命值：3.55

内核脉冲生命值：1.55

不要将其传递给函数，它已经在作用域中。还可以使用detach（）方法从DOM中删除元素。试试下面的

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

---

使用类似布尔值的

---

你想让图标从邪恶变为善良吗？你想在邪恶中停止切换图标吗？Sascha，谢谢你的回答，如果我继续点击元素，你的回答似乎有效。我想知道，当我点击“好人”时，是否有可能将所有剩余元素移动到“邪恶”部分。再次感谢你，是的。我为你改编了小提琴。请参阅上面的扩展答案。

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

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