0

基本的に静的サイトでショッピングカートを構築しようとしています。テーブルの上に商品が陳列されています。このショッピング カートをゼロから作成しました。外部の jQuery ショッピング カート ライブラリは使用していません。

機能していないように見える機能が 1 つあります。ユーザーがショッピング カートに既に存在するアイテムを追加する場合、テーブルにアイテムを追加するのではなく、数量を増やすだけです。

これまでに実装したすべてのものと動作するデモを含む JSFiddle リンクがありますが、以下のコードも参照できます。

アイテムを追加する JS は次のとおりです。

$( "#addBtn" ).click(function() {
  var item = $("#orderMenu option:selected").text();
  var qty = $("#orderQty option:selected").text();

  var newRowContent = "<tr><td>" + qty + "</td><td>" + item + "</td>";

  $("#cart-info tbody").append(newRowContent);
});

簡単にするために、簡略化した HTML を次に示します。

<table class="table" id="cart-info">
    <thead>
        <tr>
            <th>#</th>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<select id="orderMenu">
    <option>Foo</option>
    <option>Bar</option>
</select>

<select id="orderQty">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<button id="addBtn">ADD TO CART</button>

これは、jQuery に変換したい疑似コードですが、方法がわかりません。

(変な疑似コード/jQuery ハイブリッドで申し訳ありません。私はまだ jQuery を学んでいます)

for each <td> in #cart-info {
    if (<td>.html() == item) {
        qtyCell = the previous <td>
        oldQty = Number(qtyCell.text())
        newQty = oldQty + qty
        qtyCell.html(newQty)
        exit for loop
    }
}

ウェブサイト自体は純粋に HTML/CSS/JS で書かれているため、完全に静的なサイトです。

事前にどうもありがとうございました！

4

2 に答える 2

1

このフィドル
を確認してください新しいフィドル 各オプションの値を使用して、テーブルに既に追加されているかどうかを判断します。 

$( "#addBtn" ).click(function() {
  var item = $("#orderMenu option:selected").text();
  var item_val = $("#orderMenu").val();
  var qty = $("#orderQty option:selected").text();

  var newRowContent = "<tr><td class='qty'>" + qty + "</td><td data-val='"+item_val+"'>" + item + "</td>";
  if ($("#cart-info tbody [data-val='"+item_val+"']").length < 1)
      $("#cart-info tbody").append(newRowContent);
    else {
        var new_qty = parseInt($("#cart-info tbody [data-val='"+item_val+"']").prev('.qty').text())+parseInt(qty);
        $("#cart-info tbody [data-val='"+item_val+"']").prev('.qty').text(new_qty);
    }
});

編集：

修正されたフィドル URL

編集2

新しいフィドル更新量

于 2015-06-24T14:12:08.550 に答える
0

あなたはそれを達成することができます

  • リストの維持

キーペア値 ( JSON ) アイテム ID とその数量をフィールドとして構成する配列
Ex:-

var items = [
      {
        itemID:101,
        name:"Mobile:"
        qty:1
      },
      {
        itemID:102,
        name:"Pen Drive"
        qty:3
      }
]
  1. 新しいアイテムを追加すると、それぞれのアイテムID、数量、名前などがリストにプッシュされます
  2. 既に存在する場合は、itemID を使用してクエリを実行し、数量フィールドをインクリメントします。表示しているカートは利用可能です。その場合、行 ( trcart-info tbody )に一意の ID があることを確認してください。例: 最後に、更新された数量でそれぞれの ID のテキストを更新します。<tr id=item-101><td>1</td><td>Mobile</td></tr>
于 2015-06-24T14:26:17.257 に答える