DOM购物车加减数量通过事件委托监听按钮点击，用closest()定位商品项，读写item-count文本值并同步至cartItems数组，限制最小值为1。

用 DOM 操作实现购物车的加减数量，核心是监听按钮点击、读取当前数量、更新显示并同步到数据（如商品对象或数组），同时注意边界控制（比如不能减到 0 以下）。下面是一个轻量、可直接运行的实现方案。

HTML 结构：准备基础元素

每个商品项需要一个容器，包含商品名、当前数量、减按钮、加按钮。推荐用 data- 属性标记商品 ID 或索引，方便 JS 定位：

<div class="cart-item" data-id="1">
  <span class="item-name">苹果</span>
  <button class="btn-decrease">−</button>
  <span class="item-count">1</span>
  <button class="btn-increase">+</button>
</div>

JavaScript 逻辑：绑定事件与更新数量

用事件委托避免为每个按钮重复绑定；用 closest() 找到所属商品项；用 textContent 读写数量；更新后建议同步到内存中的购物车数据（例如全局数组）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 给整个购物车容器（如 .cart-list）绑定点击事件
• 判断点击目标是否为 .btn-increase 或 .btn-decrease
• 用 closest('.cart-item') 获取当前商品行
• 读取 .item-count 的文本内容，转为数字，执行 +1 或 −1
• 限制最小值为 1（减操作后若小于 1，设为 1；也可设为 0，按业务定）
• 把新数值写回 .item-count.textContent
• 可选：根据 data-id 更新对应商品在 cartItems 数组里的 count 字段

完整可运行示例（含数据同步）

以下代码可直接复制到 HTML 文件中测试：

立即学习“Java免费学习笔记（深入）”；

<script>
const cartItems = [
  { id: 1, name: '苹果', count: 1 },
  { id: 2, name: '香蕉', count: 1 }
];

document.querySelector('.cart-list').addEventListener('click', e => {
  if (!e.target.matches('.btn-increase, .btn-decrease')) return;

  const itemEl = e.target.closest('.cart-item');
  const id = Number(itemEl.dataset.id);
  const countEl = itemEl.querySelector('.item-count');
  let count = parseInt(countEl.textContent) || 1;

  if (e.target.classList.contains('btn-increase')) {
    count++;
  } else {
    count = Math.max(1, count - 1); // 最少为 1
  }

  countEl.textContent = count;

  // 同步到 cartItems 数组
  const item = cartItems.find(i => i.id === id);
  if (item) item.count = count;
});
</script>

小提示：避免常见坑

• 不要用 innerHTML 更新数量——除非你确定里面没其他 HTML；优先用 textContent
• parseInt 要带基数 10，避免字符串以 0 开头被当成八进制（虽然现在少见，但写全更稳）
• 减到 0 时是否允许删除商品？ 可在减操作后加判断：if (count === 0) itemEl.remove();
• 如需持久化，可在每次更新后调用 localStorage.setItem('cart', JSON.stringify(cartItems))