原生js对商品购物车进行加减

在原生JavaScript中对商品购物车进行加减操作，通常涉及到HTML页面上的按钮或链接，以及JavaScript中的事件监听和DOM操作。以下是实现购物车加减功能的基本步骤和代码示例：

1. 首先，在HTML中定义商品列表和加减按钮。比如，对于每个商品项，可以有两个按钮分别对应增加和减少数量。

<!-- 商品列表项 -->
<div class="product-item">
  <span class="product-name">商品名称</span>
  <span class="product-quantity">数量: <span class="quantity">1</span></span>
  <button class="add-btn">+</button>
  <button class="subtract-btn">-</button>
</div>

2. 接着，使用JavaScript添加事件监听器，当点击增加或减少按钮时，相应地更新商品数量。

// 获取所有增加按钮和减少按钮
var addButtons = document.querySelectorAll('.add-btn');
var subtractButtons = document.querySelectorAll('.subtract-btn');

// 添加事件监听器
addButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var item = button.closest('.product-item'); // 找到按钮所在的商品项
    var quantitySpan = item.querySelector('.quantity');
    var currentQuantity = parseInt(quantitySpan.textContent, 10); // 获取当前数量
    var newQuantity = currentQuantity + 1; // 设置新的数量
    quantitySpan.textContent = newQuantity; // 更新显示数量
  });
});

subtractButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var item = button.closest('.product-item'); // 找到按钮所在的商品项
    var quantitySpan = item.querySelector('.quantity');
    var currentQuantity = parseInt(quantitySpan.textContent, 10); // 获取当前数量
    // 需要确保数量不会小于1
    if (currentQuantity > 1) {
      var newQuantity = currentQuantity - 1; // 设置新的数量
      quantitySpan.textContent = newQuantity; // 更新显示数量
    }
  });
});

3. 最后，可能还需要进行一些额外的操作，比如更新总价格、限制商品数量的最大值等。