Add/Remove parent div 通过单击按钮发送到另一个 div

Question

我希望 parent div 按钮的“.card”在单击按钮时添加到蓝色 div，并且还能够 "returned" 再次单击按钮后变为原来的红色 div。 jsfiddle

<div id="nonSelected">

  <div class="card">
   CARD #1
   <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="ADD" />
  </div>

  <div class="card">
   CARD #2
   <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="ADD" />
  </div>

</div>

<div id="selected">
</div>


<script>
function moveButton(elem){
    if( $(elem).parent().attr("id") == "nonSelected" ){
        $(elem).detach().appendTo('#selected');
    }
    else{
        $(elem).detach().appendTo('#nonSelected'); 
    }
}
</script>

Answer 1

首先，id 属性必须在文档中是唯一的，因此您应该从 input 元素中删除 id 属性 .card（或使它们独一无二）。其次，您的 fiddle 示例不包括 jQuery.

要解决您的实际问题，您可以使用 closest() 从 input 检索父 .card。然后，您可以通过检查它当前包含在哪个中来 [=18=] 到所需的 div，如下所示：

$('.card input').click(function() {
    var $card = $(this).closest('.card')
    $card.appendTo($card.closest('#nonSelected').length ? '#selected' : '#nonSelected');
});

Updated fiddle

请注意，您根本不需要调用 detach()，因为元素只是在 DOM 中移动。另请注意，更好的做法是使用不显眼的 javascript 来附加您的事件处理程序，而不是使用笨重且过时的 on* 事件属性。因为你已经包含了 jQuery 代码，我用它来实现这个。

Add/Remove parent div 通过单击按钮发送到另一个 div

Add/Remove parent div to another div by clicking button

jquery

appendto