本文旨在解决 JavaScript 实现购物车数量增减功能时，仅对页面中第一个元素生效的问题。通过分析常见错误原因，并提供一种基于事件委托和 DOM 遍历的优化方案，帮助开发者实现可复用的、简洁高效的购物车数量控制功能。同时，强调了编写有效 HTML结构的重要性。
在开发购物车或商品详情页时，经常需要实现数量增减的功能。一个常见的错误是，当页面中存在多个商品时，JavaScript 代码只对第一个商品生效。 这通常是因为代码只选择了第一个元素，而没有正确地处理多个元素的情况。本文将探讨这个问题，并提供一种更有效、可复用的解决方案。
问题分析
最初的代码尝试使用 querySelectorAll 获取所有按钮，但仍然存在问题。 主要原因是：
- 选择器问题： 使用了带编号的类名（例如 .pqt-plus1），导致代码只能选择到第一个元素。
- 变量作用域： 为每个元素都创建了独立的变量，导致代码的复用性差，且难以维护。
解决方案：事件委托和 DOM 遍历
更优雅的解决方案是使用事件委托和 DOM 遍历。 这种方法可以避免为每个按钮都添加事件监听器，从而提高性能和代码的可维护性。
立即学习“Java免费学习笔记（深入）”；
HTML 结构优化：
首先，我们需要优化 HTML 结构，使其更易于操作。 移除数字后缀的类名，并使用通用的类名。 同时，使用 data 属性来存储增减的值。 并且修正了 HTML 结构中div不能位于span标签中的问题。
<div class="d-flex align-items-center pls-moins">
<span class="count-number float-right">
<button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
<i class="feather-minus"></i> -
</button>
<span class="cart-button">
<span class="added">0</span>
</span>
<button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
<i class="feather-plus"></i> +
</button>
</span>
</div>
<div class="d-flex align-items-center pls-moins">
<span class="count-number float-right">
<button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
<i class="feather-minus"></i> -
</button>
<span class="cart-button">
<span class="added">0</span>
</span>
<button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
<i class="feather-plus"></i> +
</button>
</span>
</div>
<div class="d-flex align-items-center pls-moins">
<span class="count-number float-right">
<button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
<i class="feather-minus"></i> -
</button>
<span class="cart-button">
<span class="added">0</span>
</span>
<button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
<i class="feather-plus"></i> +
</button>
</span>
</div>
<div class="d-flex align-items-center pls-moins">
<span class="count-number float-right">
<button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
<i class="feather-minus"></i> -
</button>
<span class="cart-button">
<span class="added">0</span>
</span>
<button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
<i class="feather-plus"></i> +
</button>
</span>
</div>JavaScript 代码：
document.querySelectorAll(".btn-sm").forEach(btn => {
btn.addEventListener('click', e => {
let total = e.target.closest('.pls-moins').querySelector('.added');
total.textContent = Math.max(0, parseInt(total.textContent, 10) + parseInt(e.currentTarget.dataset.inc, 10));
});
});代码解释：
- document.querySelectorAll(".btn-sm").forEach(btn => { ... });: 选择所有类名为 .btn-sm 的按钮，并为每个按钮添加事件监听器。
- e.target.closest('.pls-moins'): e.target 是触发事件的元素（即点击的按钮）。 closest('.pls-moins') 向上查找最近的祖先元素，该祖先元素具有 .pls-moins 类。
- .querySelector('.added'): 在找到的 .pls-moins 元素中，查找类名为 .added 的元素，该元素显示数量。
- parseInt(total.textContent, 10): 将数量的文本内容转换为整数。 10 表示十进制。
- parseInt(e.currentTarget.dataset.inc, 10): 获取点击的按钮上 data-inc 属性的值，并将其转换为整数。 e.currentTarget 指向事件监听器绑定的元素（即按钮）。
- Math.max(0, ...): 确保数量不会小于 0。
总结
通过使用事件委托和 DOM 遍历，我们可以编写出更简洁、可维护的 JavaScript 代码，以处理多个元素的情况。 这种方法不仅提高了代码的效率，还使其更易于扩展和修改。 记住，编写有效的 HTML 结构是实现此解决方案的关键。 避免使用带编号的类名，并使用通用的类名和 data 属性来存储相关信息。 最后，确保您的 HTML 结构是有效的。
