JS实现简单的购物车

<div>
  <h2>产品列表</h2>
  <ul id="productList">
    <li data-id="1">
      <h3>商品1</h3>
      <p>价格：10元</p>
      <button class="add-to-cart">添加至购物车</button>
    </li>
    <li data-id="2">
      <h3>商品2</h3>
      <p>价格：20元</p>
      <button class="add-to-cart">添加至购物车</button>
    </li>
    <li data-id="3">
      <h3>商品3</h3>
      <p>价格：30元</p>
      <button class="add-to-cart">添加至购物车</button>
    </li>
  </ul>
</div>
<div>
  <h2>购物车</h2>
  <ul id="cart">
  </ul>
  <p id="totalAmount">总金额：0元</p>
  <button id="checkout">结算</button>
</div>

const productList = document.getElementById('productList');
const cart = document.getElementById('cart');
const totalAmount = document.getElementById('totalAmount');
const checkoutBtn = document.getElementById('checkout');
const cartItems = {};
// 添加至购物车事件
productList.addEventListener('click', (event) => {
  if (event.target.classList.contains('add-to-cart')) {
    const product = event.target.parentElement;
    const productId = product.getAttribute('data-id');
    const productName = product.querySelector('h3').textContent;
    const productPrice = product.querySelector('p').textContent;
    addItemToCart(productId, productName, productPrice);
  }
});
// 添加物品至购物车
function addItemToCart(id, name, price) {
  if (cartItems[id]) {
    cartItems[id].count++;
    updateCartItem(cartItems[id]);
  } else {
    const item = { id, name, price, count: 1 };
    cartItems[id] = item;
    addCartItem(item);
  }
  updateTotalAmount();
}
// 添加购物车物品
function addCartItem(item) {
  const li = document.createElement('li');
  li.setAttribute('data-id', item.id);
  li.innerHTML = `
    <span>${item.name}</span>
    <span>${item.price}</span>
    <span>${item.count}</span>
    <button class="remove-item">删除</button>
  `;
  cart.appendChild(li);
}
// 更新购物车物品数量
function updateCartItem(item) {
  const cartItem = cart.querySelector(`[data-id="${item.id}"]`);
  cartItem.querySelector('span:nth-of-type(3)').textContent = item.count;
}
// 删除购物车物品事件
cart.addEventListener('click', (event) => {
  if (event.target.classList.contains('remove-item')) {
    const item = event.target.parentElement;
    const itemId = item.getAttribute('data-id');
    delete cartItems[itemId];
    item.remove();
    updateTotalAmount();
  }
});
// 计算总计
function updateTotalAmount() {
  const amount = Object.values(cartItems)
    .reduce((sum, item) => sum + item.price * item.count, 0);
    totalAmount.textContent = `总金额：${amount}元`;
}
// 结算事件
checkoutBtn.addEventListener('click', () => {
  alert('结算成功！');
  cart.innerHTML = '';
  totalAmount.textContent = '总金额：0元';
  cartItems = {};
});