利用jQuery实现简单的商品购物车功能

<div id='cart'>
  <h3>购物车</h3>
  <ul id='cart-items'></ul>
  <p id='cart-total'>总价：0元</p>
</div>
<ul id='product-list'>
  <li>
    <h4>商品1</h4>
    <p>价格：100元</p>
    <button class='add-to-cart'>添加到购物车</button>
  </li>
  <li>
    <h4>商品2</h4>
    <p>价格：200元</p>
    <button class='add-to-cart'>添加到购物车</button>
  </li>
  <li>
    <h4>商品3</h4>
    <p>价格：300元</p>
    <button class='add-to-cart'>添加到购物车</button>
  </li>
</ul>
<script>
  $('.add-to-cart').click(function() {
    // 获取商品名称和价格
    var itemName = $(this).siblings('h4').text();
    var itemPrice = parseInt($(this).siblings('p').text().replace('价格：', '').replace('元', ''));
    
    // 创建一个新的购物车项
    var cartItem = $('<li>').text(itemName + ' - ' + itemPrice + '元');
    
    // 将购物车项添加到购物车列表
    $('#cart-items').append(cartItem);
    
    // 更新购物车总价
    var cartTotal = parseInt($('#cart-total').text().replace('总价：', '').replace('元', ''));
    $('#cart-total').text('总价：' + (cartTotal + itemPrice) + '元');
  });
</script>