jQuery 实现商品购物车功能：添加、删除、修改数量

使用 jQuery 实现商品购物车功能

本文将使用 jQuery 实现商品购物车的基本功能，包括添加商品到购物车、从购物车中删除商品以及修改购物车中商品数量。代码清晰易懂，并提供详细的注释，方便学习和应用。

1. 添加商品到购物车

HTML 代码：

<div class='product'>
  <h3>商品1</h3>
  <p>价格：100元</p>
  <button class='add-to-cart' data-id='1'>加入购物车</button>
</div>
<div class='product'>
  <h3>商品2</h3>
  <p>价格：200元</p>
  <button class='add-to-cart' data-id='2'>加入购物车</button>
</div>

<div class='cart'>
  <h3>购物车</h3>
  <ul></ul>
  <p>总价：<span class='total-price'>0</span>元</p>
</div>

jQuery 代码：

$(document).ready(function() {
  var cart = []; // 购物车数组
  var totalPrice = 0; // 总价

  // 点击加入购物车按钮
  $('.add-to-cart').click(function() {
    var id = $(this).data('id'); // 获取商品id
    var name = $(this).siblings('h3').text(); // 获取商品名称
    var price = parseFloat($(this).siblings('p').text().replace('价格：', '').replace('元', '')); // 获取商品价格
    var item = { id: id, name: name, price: price, count: 1 }; // 创建商品对象

    // 判断商品是否已经在购物车中
    var exist = false;
    for (var i = 0; i < cart.length; i++) {
      if (cart[i].id == id) {
        cart[i].count++;
        exist = true;
        break;
      }
    }

    // 如果商品不在购物车中，则添加到购物车
    if (!exist) {
      cart.push(item);
    }

    // 更新购物车列表和总价
    updateCart();
  });

  // 更新购物车列表和总价
  function updateCart() {
    var list = $('.cart ul');
    list.empty(); // 清空列表

    totalPrice = 0;
    for (var i = 0; i < cart.length; i++) {
      var item = cart[i];
      var li = $('<li></li>');
      li.text(item.name + ' × ' + item.count + ' = ' + (item.price * item.count) + '元');
      list.append(li);

      totalPrice += item.price * item.count;
    }

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

2. 从购物车中删除商品

HTML 代码：

<div class='product'>
  <h3>商品1</h3>
  <p>价格：100元</p>
  <button class='add-to-cart' data-id='1'>加入购物车</button>
</div>
<div class='product'>
  <h3>商品2</h3>
  <p>价格：200元</p>
  <button class='add-to-cart' data-id='2'>加入购物车</button>
</div>

<div class='cart'>
  <h3>购物车</h3>
  <ul></ul>
  <p>总价：<span class='total-price'>0</span>元</p>
</div>

jQuery 代码：

$(document).ready(function() {
  var cart = []; // 购物车数组
  var totalPrice = 0; // 总价

  // 点击加入购物车按钮
  $('.add-to-cart').click(function() {
    var id = $(this).data('id'); // 获取商品id
    var name = $(this).siblings('h3').text(); // 获取商品名称
    var price = parseFloat($(this).siblings('p').text().replace('价格：', '').replace('元', '')); // 获取商品价格
    var item = { id: id, name: name, price: price, count: 1 }; // 创建商品对象

    // 判断商品是否已经在购物车中
    var exist = false;
    for (var i = 0; i < cart.length; i++) {
      if (cart[i].id == id) {
        cart[i].count++;
        exist = true;
        break;
      }
    }

    // 如果商品不在购物车中，则添加到购物车
    if (!exist) {
      cart.push(item);
    }

    // 更新购物车列表和总价
    updateCart();
  });

  // 点击删除按钮
  $('.cart').on('click', '.remove-from-cart', function() {
    var id = $(this).data('id'); // 获取商品id

    // 在购物车中查找商品，并删除
    for (var i = 0; i < cart.length; i++) {
      if (cart[i].id == id) {
        cart.splice(i, 1);
        break;
      }
    }

    // 更新购物车列表和总价
    updateCart();
  });

  // 更新购物车列表和总价
  function updateCart() {
    var list = $('.cart ul');
    list.empty(); // 清空列表

    totalPrice = 0;
    for (var i = 0; i < cart.length; i++) {
      var item = cart[i];
      var li = $('<li></li>');
      li.text(item.name + ' × ' + item.count + ' = ' + (item.price * item.count) + '元');

      var removeBtn = $('<button class='remove-from-cart' data-id=' + item.id + '>删除</button>');
      li.append(removeBtn);

      list.append(li);

      totalPrice += item.price * item.count;
    }

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

3. 修改购物车中商品数量

HTML 代码：

<div class='product'>
  <h3>商品1</h3>
  <p>价格：100元</p>
  <button class='add-to-cart' data-id='1'>加入购物车</button>
</div>
<div class='product'>
  <h3>商品2</h3>
  <p>价格：200元</p>
  <button class='add-to-cart' data-id='2'>加入购物车</button>
</div>

<div class='cart'>
  <h3>购物车</h3>
  <ul></ul>
  <p>总价：<span class='total-price'>0</span>元</p>
</div>

jQuery 代码：

$(document).ready(function() {
  var cart = []; // 购物车数组
  var totalPrice = 0; // 总价

  // 点击加入购物车按钮
  $('.add-to-cart').click(function() {
    var id = $(this).data('id'); // 获取商品id
    var name = $(this).siblings('h3').text(); // 获取商品名称
    var price = parseFloat($(this).siblings('p').text().replace('价格：', '').replace('元', '')); // 获取商品价格
    var item = { id: id, name: name, price: price, count: 1 }; // 创建商品对象

    // 判断商品是否已经在购物车中
    var exist = false;
    for (var i = 0; i < cart.length; i++) {
      if (cart[i].id == id) {
        cart[i].count++;
        exist = true;
        break;
      }
    }

    // 如果商品不在购物车中，则添加到购物车
    if (!exist) {
      cart.push(item);
    }

    // 更新购物车列表和总价
    updateCart();
  });

  // 点击删除按钮
  $('.cart').on('click', '.remove-from-cart', function() {
    var id = $(this).data('id'); // 获取商品id

    // 在购物车中查找商品，并删除
    for (var i = 0; i < cart.length; i++) {
      if (cart[i].id == id) {
        cart.splice(i, 1);
        break;
      }
    }

    // 更新购物车列表和总价
    updateCart();
  });

  // 修改商品数量
  $('.cart').on('input', '.item-count', function() {
    var id = $(this).data('id'); // 获取商品id
    var count = parseInt($(this).val()); // 获取商品数量

    // 在购物车中查找商品，并修改数量
    for (var i = 0; i < cart.length; i++) {
      if (cart[i].id == id) {
        cart[i].count = count;
        break;
      }
    }

    // 更新购物车列表和总价
    updateCart();
  });

  // 更新购物车列表和总价
  function updateCart() {
    var list = $('.cart ul');
    list.empty(); // 清空列表

    totalPrice = 0;
    for (var i = 0; i < cart.length; i++) {
      var item = cart[i];
      var li = $('<li></li>');
      li.text(item.name + ' × ');

      var countInput = $('<input class='item-count' type='number' min='1' value=' + item.count + ' data-id=' + item.id + '> ');
      li.append(countInput);

      li.append(' = ' + (item.price * item.count) + '元');

      var removeBtn = $('<button class='remove-from-cart' data-id=' + item.id + '>删除</button>');
      li.append(removeBtn);

      list.append(li);

      totalPrice += item.price * item.count;
    }

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

总结

本文介绍了使用 jQuery 实现商品购物车的基本功能，包括添加商品到购物车、从购物车中删除商品以及修改购物车中商品数量。代码清晰易懂，并提供详细的注释，方便学习和应用。

您可以根据自己的需求进行扩展和修改，例如添加清空购物车功能、结算功能等等。