用jQuery实现Apple商城购物车功能

以下是一个简单的使用 jQuery 实现 Apple 商城购物车功能的示例：

HTML 代码：

<div id="cart">
  <h2>购物车</h2>
  <ul id="cart-items"></ul>
  <p>总价：<span id="total-price">0</span> 元</p>
</div>

<div class="product">
  <h2>产品名称</h2>
  <p>价格：100 元</p>
  <button class="add-to-cart">加入购物车</button>
</div>

jQuery 代码：

$(document).ready(function() {
  var cartItems = [];
  var totalPrice = 0;

  $('.add-to-cart').click(function() {
    var productName = $(this).siblings('h2').text();
    var productPrice = parseInt($(this).siblings('p').text().replace('价格：', '').replace(' 元', ''));
    var item = { name: productName, price: productPrice };
    cartItems.push(item);
    totalPrice += productPrice;
    $('#cart-items').append('<li>' + productName + ' - ' + productPrice + ' 元</li>');
    $('#total-price').text(totalPrice);
  });
});

在上面的示例中，我们首先定义了一个空的 `cartItems` 数组和 `totalPrice` 变量来存储购物车中的商品和总价。然后，我们使用 jQuery 的 `click()` 函数来监听加入购物车按钮的点击事件。在点击事件处理程序中，我们使用 jQuery 的 `siblings()` 函数来获取产品名称和价格，并将它们存储在一个对象中。接着，我们将该对象添加到 `cartItems` 数组中，并将商品价格加到 `totalPrice` 变量中。最后，我们使用 jQuery 的 `append()` 函数将商品信息添加到购物车列表中，并更新总价显示。