Question

我喜欢父div＆＃34; .card＆＃34;单击按钮时要添加到蓝色div的按钮，并且还能够返回＆＃34;再次单击按钮到原始红色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属性必须在文档中是唯一的，因此您应该从id中的input元素中删除.card属性（或使它们独一无二）。其次，你的小提琴示例不包括jQuery。

要解决实际问题，您可以使用.card从input检索父closest()。然后，您可以通过检查当前包含的append()来div到所需的$('.card input').click(function() { var $card = $(this).closest('.card') $card.appendTo($card.closest('#nonSelected').length ? '#selected' : '#nonSelected'); });，如下所示：

detach()

Updated fiddle

请注意，您根本不需要调用on*，因为元素只是在DOM中移动。另请注意，使用不显眼的javascript来附加事件处理程序而不是笨拙且过时的<?php $counter = 0; echo ' <form> <table>'; while ( $chat = mysqli_fetch_assoc($chatQ)){ $counter++; echo ' <tr> <td> group_id_'.$counter.' </td> <td> <input name="group_id_'.$counter.'" value="'.$conver['sender_id'].'"> </td> </tr>'; } echo ' <tr> <td colspan="2"> <button type="submit">Enter</button> </td> </tr> </table> </form>'; ?>事件属性会更好。正如您已经包含了jQuery代码，我用它来实现这一点。

单击按钮将父div添加/删除到另一个div

1 个答案: