纯JS开发购物车商品数量修改失效问题求助

核心问题分析 #

1. 数量不更新的原因：
   事件监听里拿到的product_id是从.item的dataset.id获取的，但你在addCartToHTML里给.item设置的是cart.id，而changeQuantity里却用这个值去匹配购物车数组carts中的product_id字段——如果cart.id和cart.product_id不是同一个值，findIndex会返回-1，根本找不到要修改的购物车项，自然不会更新数量。

2. 修改不同商品仅第一个变化的原因：
   改用parentElement.dataset.id时，按钮的直接父元素是.quantity，这个元素没有设置dataset.id，向上查找时会出错，意外拿到第一个.item的id，导致每次都修改第一个商品。

具体修改方案 #

方案一：统一用product_id匹配

1. 修改addCartToHTML中设置dataset的代码：
   把

newCart.dataset.id = cart.id;

改成

newCart.dataset.productId = cart.product_id;

2. 修改事件监听中获取product_id的代码：
   把

let product_id = clickInstance.closest('.item').dataset.id;

改成

let product_id = clickInstance.closest('.item').dataset.productId;

方案二：如果cart.id就是商品唯一标识，修改匹配逻辑

如果你的购物车数组里，每个项的id就是商品的唯一ID，直接修改changeQuantity里的findIndex：
把

let positionItemInCart = carts.findIndex((value) => value.product_id == product_id);

改成

let positionItemInCart = carts.findIndex((value) => value.id == product_id);

验证修改 #

改完后点击增减按钮，changeQuantity就能正确找到对应的购物车项，修改数量后调用addCartToHTML重新渲染页面，数量就会正常更新了。

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