购物车中出现重复项目
Duplicate items appearing in shopping cart
我试图在静态网站上基本上构建一个购物车。项目显示在表格上。我从头开始构建这个购物车,没有使用外部jQuery购物车库。
有一个功能我似乎无法使用:当用户添加购物车中已经存在的商品时,它应该只增加数量,而不是将商品添加到表中。
这里有一个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编写的,所以它是一个完全静态的网站。
提前非常感谢!
检查这个小提琴
新小提琴使用每个选项的值来确定它是否已经添加到表中:
$( "#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
新小提琴更新数量
您可以在上实现
- 维护列表
一个数组,由键对值(JSON)项ID及其作为字段的数量组成
示例:-
var items = [
{
itemID:101,
name:"Mobile:"
qty:1
},
{
itemID:102,
name:"Pen Drive"
qty:3
}
]
- 添加新项目时,将相应的项目ID、数量、名称等推到列表中
- On已存在,则使用itemID进行查询并增加数量字段您正在显示的购物车在
cart-info tbody
中可用,因此在这种情况下,请确保行中有一个唯一的ID(tr)例如:<tr id=item-101><td>1</td><td>Mobile</td></tr>
最后用您更新的数量更新相应id的文本
相关文章:
- 添加到购物车和移除计数的产品丢失,而移除露天市场中的项目
- Javascript:从购物车中减去项目会导致负值
- Javascript window.open() 多次将项目添加到购物车
- 使用角度从ng重复,简单的购物车实现中添加和删除项目
- 使用 Redis 和 Rails 将多个项目添加到购物车
- AngularJS+simpleCart问题显示购物车内容,直到添加项目
- 如何创建可编辑的购物车项目
- 更新购物车并删除购物车中的多余项目
- 附加购物车,我如何折扣某些项目
- 查看购物车中的项目,购物车是一个对象数组
- 我试图找到一种方法,让人们通过链接向他们的蒸汽购物车添加多个项目
- 客户端购物车:在数组中添加两个具有相同描述的项目
- 删除购物车中的选定项目
- 贝宝添加到购物车多个项目的形式与折扣
- 防止在将项目提交到购物车时重新加载页面
- Codeigniter -通过jquery复选框添加多个项目到购物车
- 向购物车中添加一个项目
- 购物车中出现重复项目
- 根据窗体中的行数将项目添加到购物车
- 将购物车项目传输回 SAP SRM