如何实现购物车商品增删及总价实时重计算 附现有JS代码

核心修改思路 #

你现有代码的核心问题是没有单独维护购物车状态数据，且每次触发mytable都会覆盖原有购物车内容，我们先新增全局购物车数组存储已选商品，再依次实现添加、删除、总价计算逻辑。

完整实现代码 #

直接把原有代码替换为以下内容即可运行：

// 原始商品数据
var product = [
  {"name":"jeans","image":"pics/jeans3.jpg","price":500},
  {"name":"hoodie","image":"pics/hoodie.jpg","price":700},
  {"name":"shirt","image":"pics/shirt.jpg","price":450},
  {"name":"sweter","image":"pics/sweter.jpg","price":1100},
  {"name":"trouser","image":"pics/trouser.jpg","price":600},
  {"name":"tshirt","image":"pics/tshirt.jpg","price":250}
];
// 新增：全局购物车数组，存储已选商品和对应数量
var cart = [];

var head = "<div id='main'>";
// 修复循环中索引传参问题，把当前索引值直接拼入onclick事件
for (var i in product) {
  head += "<div class='pro'>";
  head += "<h1>" + product[i].name + "</h1>";
  head += "<img src=" + product[i].image + ">";
  head += "<p>" + product[i].price + "</p>";
  head += "<button onclick='mytable("+i+")'>Add to cart</button>"
  head += "</div>";
}

head += "</div>";
head += "<div id='cart'> </div>"
document.write(head);

// 改写添加到购物车逻辑
function mytable(i) {
  // 先判断商品是否已在购物车中
  const existItem = cart.find(item => item.name === product[i].name);
  if(existItem) {
    // 已存在则数量+1
    existItem.quantity +=1;
  } else {
    // 不存在则新增商品条目
    cart.push({
      ...product[i],
      quantity: 1
    })
  }
  // 重新渲染购物车和总价
  renderCart();
}

// 新增：购物车渲染函数
function renderCart() {
  let tableHtml = "<table border='1'> <tr><th>Product name</th>  <th>Quantity</th>  <th>Price</th> <th>image</th><th>Operation</th></tr>";
  // 遍历购物车生成行
  cart.forEach((item, index) => {
    tableHtml += `<tr>
      <td>${item.name}</td>
      <td>${item.quantity}</td>
      <td>${item.price * item.quantity}</td>
      <td><img src="${item.image}" width="50"></td>
      <td><button onclick='removeItem(${index})'>Remove Items</button></td>
    </tr>`
  })
  // 新增总价行
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  tableHtml += `<tr><td colspan="5" align="right">Total Price: ${total}</td></tr>`
  tableHtml += "</table>";
  document.getElementById('cart').innerHTML = tableHtml;
}

// 新增：删除商品逻辑
function removeItem(index) {
  // 如果要实现减数量而非直接删除，可替换为下方注释代码
  // if(cart[index].quantity > 1) {
  //   cart[index].quantity -=1;
  // } else {
  //   cart.splice(index, 1);
  // }
  // 默认直接删除对应商品条目
  cart.splice(index, 1);
  // 删除后重新渲染购物车和总价
  renderCart();
}

功能说明 #

• 添加商品：点击Add to cart按钮时，同一款商品重复点击会自动累加数量，不会重复生成表格行
• 删除商品：点击对应商品行的Remove Items按钮即可移除该商品，默认直接删除整行，也可以用注释里的逻辑实现数量递减
• 实时计算总价：每次添加、删除操作后都会自动重新计算所有商品的总价格，显示在表格底部

内容的提问来源于stack exchange，提问作者fazal