【问题标题】：Duplicate items appearing in shopping cart购物车中出现重复商品
【发布时间】：2015-06-24 14:01:48
【问题描述】：

我基本上是在一个静态网站上构建一个购物车。项目显示在表格上。我从头开始构建了这个购物车，没有使用外部 jQuery 购物车库。

有一个功能我似乎无法使用：当用户添加购物车中已经存在的商品时，它应该只增加数量而不是将商品添加到表中。

这是一个JSFiddle link，其中包含我迄今为止实现的所有内容和一个工作演示，但您也可以查看下面的代码。

这是添加项目的 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 编写的，所以它是一个完全静态的网站。

非常感谢您！

【问题讨论】：

标签： javascript jquery shopping-cart static-site

【解决方案1】：

~~查看fiddle~~
new fiddle 使用每个选项的值来确定它是否已经被添加到表中：

$( "#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);
    }
});

编辑：

固定小提琴网址

编辑 2

新fiddle更新数量

【讨论】：

感谢克里斯！但是，你的小提琴对我不起作用。如果它存在于很棒的表中，它不会添加该项目，但它不会增加数量。即如果购物车中有 1 个 Foo，我又添加了 1 个 Foo，那么该行应该显示“2 Foo”，这有意义吗？
您可以添加一个“else”块来更新数量。我会在一分钟内更新小提琴
提前非常感谢您:)

【解决方案2】：

你可以实现它

维护列表

由键对值 (JSON) 项 ID 及其数量作为字段组成的数组
例如：-

var items = [
      {
        itemID:101,
        name:"Mobile:"
        qty:1
      },
      {
        itemID:102,
        name:"Pen Drive"
        qty:3
      }
]

在添加新项目时，将相应的项目 ID、数量、名称等推送到列表中
On 已经存在，然后使用 itemID 查询并增加 qty 字段您显示的购物车在cart-info tbody 中可用，因此在这种情况下，请确保您在行中有一个唯一 ID(tr) 例如：<tr id=item-101><td>1</td><td>Mobile</td></tr>
最后用您更新的数量更新相应 id 的文本

【讨论】：