jQuery中Icon badge counter购物车计数器减操作失效问题排查

问题原因 #

• 选择器精度不足：你使用通用类名.badge匹配元素，若页面内存在其他使用badge类的组件，会导致读取的计数值错误，这是减计数逻辑失效的最常见原因。你代码里的购物车徽章单独配置了cart-badge专属类，应该用该类做精准选择。
• parseInt未指定进制规则：未传入第二个参数10强制按十进制解析，特殊场景下会出现解析异常。
• 无边界校验规则：未限制计数最小值为0，移除商品时可能出现负数的异常展示。
• 取值方法不合理：用.html()获取值如果元素内意外嵌入其他标签，会提取到非数字内容导致解析失败，推荐用.text()纯文本取值。

修复后代码 #

新增商品计数逻辑

// 购物车徽章计数+1
const counter = parseInt($(".cart-badge").text(), 10) + 1;
$(".cart-badge").text(counter);

移除商品计数逻辑

// 购物车徽章计数-1
let counter = parseInt($(".cart-badge").text(), 10) - 1;
// 限制计数最小值为0，避免出现负数
counter = counter < 0 ? 0 : counter;
$(".cart-badge").text(counter);

如果修改后逻辑依然失效，可在减计数代码前加console.log打印读取到的当前计数值，排查移除商品的事件绑定是否正常触发。

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