Question

我有两个列表（#product和#cart）。人们可以点击某个项目并一次将其移动到第二个列表。但我希望允许人们将第一个列表中的所有项目添加到第二个列表中。反之亦然 - 从购物车中删除所有商品。

你能帮忙吗？

这是我的html：

<h2>Product List</h2>
<a id="add-all">Add all items to cart</a>
<ul id="product">
    <li id="item1">item 1</li>
    <li id="item3">item 3</li>
    <li id="item5">item 5</li>
</ul>

<h2>Shopping Cart</h2>
<a id="remove-all">Remove all items</a>
<ul id="cart">
    <li id="item2">item 2<input type="hidden" name="cartItems" value="item2"></li>
    <li id="item4">item 4<input type="hidden" name="cartItems" value="item4"></li>
</ul>

如上所示，当项目单独添加到购物车时，我.append input标记具有相同的ID。

粗糙的jQuery看起来像这样：

$('#product').on('click','li', function() {
    var itemID = $(this).attr('id');
    var itemLabel = $(this).html();
    var newItemLabel = itemLabel + '<input type="hidden" name="cartItems" value="' + itemID + '">';
    $(this).remove();
    $('#cart').append('<li id="' + itemID + '">' + newItemLabel + '</li>');
});

一次只能正常工作。但是我一直试图遍历产品列表中的每个项目以添加全部（或全部删除）。

你能指出我正确的方向吗？

特别是因为我需要为每个列表项添加一个输入元素。因此，我不能只取html()的{{1}}并附加到#product而不会遍历每一个并附加输入。

铊组成; dr

#cart点击会将#add-all中的所有项目移至#product，向每个

#cart

input点击会将#remove-all中的所有项目移至#cart，删除所有#product代码
如何？

Answer 1

这适用于添加

$('#add-all').on('click', function () {
    $(this).siblings('ul').find('li').each(function (index, item) {
    $(item).append("<input type=\"hidden\" name=\"cartItems\" value=\"" + $(item).attr('id') + "\"/>");
    $('#cart').append($(item));
  });
});

您可以按照类似的逻辑删除所有内容。

检查这个小提琴：http://jsfiddle.net/hcXpY/

请检查此小提琴以删除所有代码：http://jsfiddle.net/hcXpY/2/

$('#remove-all').on('click', function () {
  $(this).siblings('ul').find('li').each(function (index, item) {
    $(item).find('input').remove();
    $('#products').append($(item));
  });
});

Answer 2

迭代有什么问题？

$('#product li').each( function() {
    var itemID = $(this).attr('id');
    var itemLabel = $(this).html();
    var newItemLabel = itemLabel + '<input type="hidden" name="cartItems" value="' + itemID + '">';
    $(this).remove();
    $('#cart').append('<li id="' + itemID + '">' + newItemLabel + '</li>');
    removeDuplicatesFromCart();
});

function removeDuplicatesFromCart()
{
 //now remove any duplicates if there are in the carts
}

Answer 3

你可以做这样简单的事情：

$("#add-all").click(function() {
    $("#products").children().appendTo("#cart");
});
$("#remove-all").click(function() {
    $("#cart").children().appendTo("#products");
});

然后，您可以添加，添加/删除<input>标记的代码，或者只是总是有输入标记，并且当它不在购物车中时通过CSS隐藏它。

Answer 4

尝试向需要删除的每个产品li添加一类删除。然后循环通过产品的所有子项，如果li有一类删除，则将其添加到购物车。

添加课程

$('ul#products li').click( function() {
    $(this).addClass('remove');
});

循环

$('ul#products li').each( function() {
    if($(this).hasClass('remove')){
       $(this).appendTo('#cart');
    }
});

你需要一些东西来触发上面提到的按钮吗？

如何将所有元素移动到另一个包装元素？

4 个答案: