JS实现简单的购物车

以下是一个基本的 JS 购物车实现：

由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！

HTML：

<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>

JS：

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

这个简单的购物车实现使用了一个对象 cartItems 作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查 cartItems 中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。