本文旨在解决 J*aScript 实现购物车数量增减功能时，仅对页面中第一个元素生效的问题。通过分析常见错误原因，并提供一种基于事件委托和 DOM 遍历的优化方案，帮助开发者实现可复用的、简洁高效的购物车数量控制功能。同时，强调了编写有效 HTML结构的重要性。

在开发购物车或商品详情页时，经常需要实现数量增减的功能。一个常见的错误是，当页面中存在多个商品时，J*aScript 代码只对第一个商品生效。 这通常是因为代码只选择了第一个元素，而没有正确地处理多个元素的情况。本文将探讨这个问题，并提供一种更有效、可复用的解决方案。

问题分析

最初的代码尝试使用 querySelectorAll 获取所有按钮，但仍然存在问题。 主要原因是：

1. 选择器问题： 使用了带编号的类名（例如 .pqt-plus1），导致代码只能选择到第一个元素。
2. 变量作用域： 为每个元素都创建了独立的变量，导致代码的复用性差，且难以维护。

解决方案：事件委托和 DOM 遍历

更优雅的解决方案是使用事件委托和 DOM 遍历。 这种方法可以避免为每个按钮都添加事件监听器，从而提高性能和代码的可维护性。

HTML 结构优化：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情

首先，我们需要优化 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>

J*aScript 代码：

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));
  });
});

代码解释：

1. document.querySelectorAll(".btn-sm").forEach(btn => { ... });: 选择所有类名为 .btn-sm 的按钮，并为每个按钮添加事件监听器。
2. e.target.closest('.pls-moins'): e.target 是触发事件的元素（即点击的按钮）。 closest('.pls-moins') 向上查找最近的祖先元素，该祖先元素具有 .pls-moins 类。
3. .querySelector('.added'): 在找到的 .pls-moins 元素中，查找类名为 .added 的元素，该元素显示数量。
4. parseInt(total.textContent, 10): 将数量的文本内容转换为整数。 10 表示十进制。
5. parseInt(e.currentTarget.dataset.inc, 10): 获取点击的按钮上 data-inc 属性的值，并将其转换为整数。 e.currentTarget 指向事件监听器绑定的元素（即按钮）。
6. Math.max(0, ...): 确保数量不会小于 0。

总结

通过使用事件委托和 DOM 遍历，我们可以编写出更简洁、可维护的 J*aScript 代码，以处理多个元素的情况。 这种方法不仅提高了代码的效率，还使其更易于扩展和修改。 记住，编写有效的 HTML 结构是实现此解决方案的关键。 避免使用带编号的类名，并使用通用的类名和 data 属性来存储相关信息。 最后，确保您的 HTML 结构是有效的。

以上就是J*aScript 购物车数量增减按钮仅对第一个元素生效的解决方案的详细内容，更多请关注其它相关文章！

# javascript  # java  # html  # 作用域  # 第一个  # 购物车  # 遍历  # 置顶  # 多个  # 仅对  # 复用  # 使其  # 选择器  # 转换为  # 崇明区先进网站建设预算  # 泰和县建设手机网站电话  # 雁塔区推广线上营销商家  # 市场营销中的推广策略  # 义乌网站优化方式  # seo 公众号导流  # 益阳网站建设优化  # 绍兴专业网站建设费用  # 饰品店营销推广策略  # 招远网站推广收费