0

我有两个列表（#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()of#product和 append to#cart而不遍历每一个并附加一个输入。

Tl;博士

  1. #add-allclick 应该将所有项目移入#product到#cart，附加input到每个
  2. #remove-all点击应该将所有项目移入#cart，#product删除所有input标签
  3. 如何？
4

4 回答 4

2

这将适用于所有

$('#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));
  });
});
于 2013-01-17T04:53:25.467 回答
0

迭代有什么问题？

$('#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
}
于 2013-01-17T04:50:46.137 回答
0

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

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

然后，您可以添加添加/删除<input>标签的代码，或者只保留输入标签，并在不在购物车中时通过 CSS 将其隐藏。

于 2013-01-17T04:54:44.550 回答
0

尝试为每个需要删除的产品 li 添加一个 remove 类。然后循环遍历 products 的所有子节点，如果 li 有一个 remove 类，则将其添加到购物车。

添加类

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

循环播放

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

您需要一些东西来触发上述按钮吗？

于 2013-01-17T04:56:18.097 回答