0

2つのリスト（#productと#cart）があります。ユーザーはアイテムをクリックして、一度に1つずつ2番目のリストに移動できます。しかし、私は人々が最初のリストのすべてのアイテムを2番目のリストに追加できるようにしたいと思っています。また、その逆も同様です—カートからすべてのアイテムを削除します。

手伝ってくれますか？

これが私の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>

上記のように、アイテムがカートに個別に追加されると、同じID.appendのinputタグが付けられます。

大まかな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>');
});

これは一度に1つずつ問題なく機能します。しかし、製品リストの各項目を繰り返し処理してすべてを追加（またはすべて削除）しようとして立ち往生しています。

私を正しい方向に向けてもらえますか？

特に、すべてのリスト項目に入力要素を追加する必要があるためです。したがって、それぞれをループして入力を追加せずhtml()に、を取得し#productて追加することはできません。#cart

Tl; dr

  1. #add-allクリックすると、すべてのアイテムがに移動し#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のクラスを追加してみてください。次に、製品のすべての子をループします。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 に答える