Question

我正在尝试使用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>

Answer 1

不要将此功能传递给您的功能，它已经在范围内。同样使用detach（）方法，您将从DOM中删除元素。请尝试以下方法......

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

Answer 2

使用类似fiddle

的布尔值来控制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');

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

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

2 个答案: