当前位置：首页 > jquery

jquery 购物车

2026-04-08 01:51:47jquery

jquery 购物车

jQuery 购物车实现方法

使用 jQuery 实现购物车功能可以通过动态操作 DOM 元素来实现添加商品、删除商品、更新数量和计算总价等功能。以下是一个简单的实现方法：

基本 HTML 结构

<div class="cart">
  <h3>购物车</h3>
  <ul id="cart-items"></ul>
  <div class="total">总价: <span id="total-price">0</span>元</div>
</div>

<div class="products">
  <div class="product" data-id="1" data-price="100">
    <h4>商品1</h4>
    <p>价格: 100元</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="product" data-id="2" data-price="200">
    <h4>商品2</h4>
    <p>价格: 200元</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
</div>

jQuery 购物车逻辑

$(document).ready(function() {
  let cart = [];

  // 添加商品到购物车
  $('.add-to-cart').click(function() {
    const product = $(this).parent();
    const id = product.data('id');
    const name = product.find('h4').text();
    const price = product.data('price');

    // 检查是否已在购物车中
    const existingItem = cart.find(item => item.id === id);

    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      cart.push({
        id: id,
        name: name,
        price: price,
        quantity: 1
      });
    }

    updateCart();
  });

  // 更新购物车显示
  function updateCart() {
    const $cartItems = $('#cart-items');
    $cartItems.empty();

    let total = 0;

    cart.forEach(item => {
      total += item.price * item.quantity;

      const $item = $('<li>').text(
        `${item.name} - ${item.price}元 × ${item.quantity}`
      );

      const $removeBtn = $('<button>').text('删除').addClass('remove-item')
        .data('id', item.id);

      $item.append($removeBtn);
      $cartItems.append($item);
    });

    $('#total-price').text(total);
  }

  // 删除商品
  $(document).on('click', '.remove-item', function() {
    const id = $(this).data('id');
    cart = cart.filter(item => item.id !== id);
    updateCart();
  });
});