jquery - 将上面的元素添加到另一个div上的按钮点击

问题描述：

我试图在单击button.additem时将表单上方的div（.item_desc）移除到侧边栏。所有的表单处理都将是php/ajax，我只需要一个可视化的表示方式，因为页面不会令人耳目一新。jquery - 将上面的元素添加到另一个div上的按钮点击

表格及申报单

<div class="item">  
     <div class="item_desc"> 
      Item 1<br> 
      Item 1 Desc 
     </div> 
     <form method="post"> 
      <button type="submit" name="submit" class="additem">Add To Cart</button> 
      <input type="hidden" name="id" value=""> 
      <input type="hidden" name="name" value=""> 
      <input type="hidden" name="qty" value=""> 
      <input type="hidden" name="desc" value=""> 
      <input type="hidden" name="price" value=""> 
      <input type="hidden" name="img" value=""> 
     </form> 
    </div>

jQuery的

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(e) { 
    $('.additem').click(function(e) { 
     $(this).closest('.item_desc').appendTo('#sidebar') 
    }); 

}); 
</script>

不能完全制定出什么我做错了，使用父（）选择器和一些其他的东西都试过了。任何帮助或更好的方式，这将不胜感激。

答

closest选择元素的最接近的匹配父项。目标元素是父form元素的兄弟姐妹：

$(this).closest('form') // get the closest parent form element 
     .siblings('.item_desc') // get the sibling of the form element 
     .appendTo('#sidebar');

你也像其他几个选项：

$(this).closest('.item') // get the closest `.item` parent/ancestor 
     .children('.item_desc') // get the `.item_desc` children 
     .appendTo('#sidebar');

还要注意的是，你应该避免形式，可使用的.preventDefault()方法提交event对象或在处理程序中返回虚假值（return false）。

谢谢，按我的意愿工作。我欣赏这两个答案，我并不完全理解父母/孩子的关系，现在它很好，很清楚。祝你有美好的一天。 – Dale 2014-10-29 01:26:28

@Dale非常欢迎您！你也是。 – undefined 2014-10-29 01:37:20

答

我添加返回false，因为点击提交将重新加载页面（导致元素回到原来的位置）。如果您需要的表单提交，你需要做一个Ajax调用

我也改变了代码一点点

$('.additem').click(function(e) { 
    var $itemDesc = $('.item_desc'); 
    $('#sidebar').append($itemDesc); 
    return false; 
    });

这里是plunker：http://plnkr.co/edit/bifq72JXtDLO5B4qPYpN?p=preview

你可以看到，当你点击按钮背景变成红色。这是因为#sidebar div有一个内联的背景风格的红色显示其已被移动

jquery - 将上面的元素添加到另一个div上的按钮点击

相关推荐