本文详解如何解决多分类商品页中“切换类别后仍添加首类商品”的典型 bug，核心在于修正 queryselector 的误用、重构商品索引逻辑，并确保每个按钮精准关联对应商品。
在构建多分类电商前端时，一个常见却隐蔽的陷阱是：尽管页面按类别（如 Hanorace、Bluze、Tricouri）分组渲染商品，但点击第二类及之后类别的“Add To Cart”按钮时，实际加入购物车的却是第一类的商品。问题根源并非逻辑混乱，而在于 DOM 查询方式与索引映射的严重错位。
? 问题定位：querySelector 的静态陷阱
原始代码中，addToCart(categoryIndex, key) 的调用看似合理，但关键缺陷隐藏在 initApp() 的商品渲染环节：
productArray.slice(category[0], category[1] + 1).forEach((value, key) => {
// ...
<button class="product-button" onclick="addToCart(${categoryIndex}, ${key})">...</button>
});此处 key 是当前 slice() 后数组的局部索引（0–9），而 categoryIndex 仅表示类别序号（0–4）。但在 addToCart 中，错误地执行了：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
let productIndex = categoryIndex + key; // ❌ 危险计算！
这导致：
- 第二类（categoryIndex = 1）的第 0 个商品 → productIndex = 1 → 实际取 productsAll[1]（Hanorac2，而非 Bluza1）
- 第三类（categoryIndex = 2）的第 0 个商品 → productIndex = 2 → productsAll[2]（Hanorac3）
结果：所有类别均复用首类前 N 个商品 ID，彻底丧失唯一性。
⚠️ 更深层隐患：document.querySelector(".product-button") 在事件委托或动态渲染中若被误用，会始终返回文档中第一个匹配按钮（即首类首个按钮），加剧逻辑错乱。正确做法是避免全局查询，改用事件源绑定或预计算真实 ID。
✅ 正确解法：使用真实商品 ID，杜绝索引拼接
最健壮的方案是直接传递商品唯一 ID，而非依赖易错的数学运算：
// 修改 initApp() 中的按钮生成逻辑：
productArray.slice(category[0], category[1] + 1).forEach((value) => {
let newDiv = document.createElement("div");
newDiv.classList.add("product");
newDiv.innerHTML = `
<div class="product-thumbnail"><a href="${value.href}"><img src="image/${value.image}"></a></div>
<div class="product-title"><a href="${value.href}">${value.name}</a></div>
<div class="product-price">${value.price.toLocaleString()}<span>Lei</span></div>
<div class="product-button-container">
<button class="product-button" data-product-id="${value.id}">
<i class="fa-solid fa-cart-shopping"></i>Add To Cart
</button>
</div>`;
productsContainer.appendChild(newDiv);
});// 改写事件监听（移除内联 onclick，提升可维护性）：
list.addEventListener("click", (e) => {
if (e.target.closest(".product-button")) {
const productId = parseInt(e.target.closest(".product-button").dataset.productId);
addToCart(productId); // 直接传入真实 ID
}
});
// 对应更新 addToCart：
function addToCart(productId) {
const product = productsAll.find(p => p.id === productId);
if (!product) return;
const existing = listCartProducts.find(item => item.id === productId);
if (existing) {
existing.quantity++;
} else {
listCartProducts.push({
...product,
quantity: 1,
originalPrice: product.price
});
}
reloadCart();
}?️ 关键注意事项
- 永远避免 categoryIndex + key 类索引拼接：它假设数据严格连续且无缺口，一旦增删商品或调整分组，立即崩溃。
- 禁用内联 onclick 字符串拼接：易引发 XSS 风险，且难以调试；优先使用 addEventListener 和 data-* 属性。
- querySelector ≠ querySelectorAll[0]：前者仅返回首个匹配元素，后者返回 NodeList 可遍历。若需操作多个同名元素，必须用 querySelectorAll 并显式索引。
-
购物车状态管理建议：将 listCartProducts 改为 Map 或对象（以 id 为 key），提升查找效率：
const cartMap = new Map(); // key: product.id, value: { ...product, quantity }
✅ 总结
该 Bug 的本质是将展示层索引（UI 位置）与数据层标识（商品唯一 ID）混为一谈。修复的核心原则是：让每个交互动作直接携带其目标数据的权威标识（ID），而非推导索引。通过 data-product-id 属性解耦渲染与逻辑，并采用事件委托替代内联脚本，不仅能根治当前问题，更能构建出可扩展、易测试、抗变更的购物车系统。
