商品卡片数量输入异常排查：+-按钮正常但数量未同步至购物车

问题原因分析 #

核心问题有两个：

1. 点击添加商品按钮时，硬编码传入了固定数量1，没有读取卡片上输入框的实际值
2. 购物车的addItemToCart方法中，若商品已存在，仅会将数量加1，而非累加用户选择的数量

修复步骤 #

1. 修改添加商品的点击事件处理逻辑

将硬编码的数量1，替换为读取当前卡片输入框的数值：

$('.additem').click(function(event) {
 event.preventDefault();
 var $card = $(this).parents("div.card");
 var name = $(this).data('name');
 // 改用parseFloat处理小数价格，避免丢失精度
 var price = parseFloat($(this).data('price'));
 var image = $card.find(".card-img-top").attr('src');
 // 读取当前卡片输入框的数量值
 var count = parseInt($card.find(".item-count").val(), 10);
 // 确保数量为有效数字，最低为1
 count = isNaN(count) || count < 1 ? 1 : count;
 shoppingCart.addItemToCart(name, price, count, image);
 displayCart();
});

2. 修正购物车添加商品的逻辑

当商品已存在时，累加用户选择的数量，而非仅加1：

obj.addItemToCart = function(name, price, count, image) {
 for(var item in cart) {
   if(cart[item].name === name) {
     // 替换++为累加传入的count值
     cart[item].count += count;
     saveCart();
     return;
   }
 }
 var item = new Item(name, price, count, image);
 cart.push(item);
 saveCart();
}

3. 修正HTML中的数据属性错误

• 商品卡片的data-price不能包含符号，仅保留数值：

<button class="additem" data-name="Product 1" data-price="2.00">

• 卡片上的+-按钮和输入框的data-name需设置为实际商品名称，而非模板占位符：

<button class="plus-item" data-name="Product 1" onClick='increaseCount(event, this)'>
<input type="number" class="item-count" value="1" data-name="Product 1" min="1" max="20" step="1">
<button class="minus-item" data-name="Product 1" onClick='decreaseCount(event, this)'>

额外优化建议 #

• 移除按钮上无效的onclick="addNew()"（未定义该函数）
• 在decreaseCount函数中，确保输入值不会低于1，避免出现0或负数

内容的提问来源于stack exchange，提问作者hasab