利用jQuery实现商品购物

车功能。

添加商品到购物车：

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 }; // 创建商品对象

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

    // 如果商品不在购物车中，则添加到购物车
    if (!exist) {
      item.count = 1;
      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);
  }
});

从购物车中删除商品：

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

修改购物车中商品数量：

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