Question

我试图在单击button.additem时将表单上方的div（.item_desc）移到侧边栏。表单的所有处理都将是php / ajax，我只需要在购物车中看到什么，因为页面不会令人耳目一新。

表格和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>

无法弄清楚我做错了什么，尝试过使用parent（）选择器和其他一些东西。任何帮助或更好的方式，将不胜感激。

Answer 1

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）来阻止提交表单。

Answer 2

我添加了return 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

2 个答案: