写一个jquery仿制京东商城购物车前端局部更新效果

A：

HTML部分：

<div class="cart-container">
  <div class="cart-header">我的购物车</div>
  <div class="cart-list">
    <div class="cart-item">
      <div class="item-img"><img src="xxx.jpg" alt=""></div>
      <div class="item-info">
        <div class="item-name">商品名称</div>
        <div class="item-price">￥100.00</div>
      </div>
      <div class="item-num">
        <div class="num-btn minus">-</div>
        <div class="num-input">1</div>
        <div class="num-btn plus">+</div>
      </div>
      <div class="item-total">￥100.00</div>
      <div class="item-delete">删除</div>
    </div>
    <!-- 其他购物车项 -->
  </div>
  <div class="cart-footer">
    <div class="cart-total">总价：<span class="total-num">￥100.00</span></div>
    <div class="cart-submit">去结算</div>
  </div>
</div>

CSS部分：

.cart-container {
  padding: 20px;
}
.cart-header {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.cart-item {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.cart-item:last-child {
  border-bottom: none;
}
.item-img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
}
.item-name {
  font-size: 20px;
  font-weight: bold;
}
.item-price {
  color: #f40;
  font-size: 18px;
}
.item-num {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.num-btn {
  font-size: 22px;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
}
.num-btn:hover {
  background-color: #ddd;
}
.num-input {
  font-size: 18px;
  width: 40px;
  text-align: center;
  margin: 0 10px;
}
.item-total {
  color: #f40;
  font-size: 18px;
  margin-left: 20px;
}
.item-delete {
  color: #f40;
  font-size: 18px;
  cursor: pointer;
}
.cart-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.cart-total {
  font-size: 20px;
  margin-right: 20px;
}
.total-num {
  color: #f40;
  font-weight: bold;
}
.cart-submit {
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #f40;
  color: #fff;
  cursor: pointer;
}
.cart-submit:hover {
  background-color: #f50;
}

Jquery部分：

$(document).ready(function() {
  var $itemNum = $('.item-num .num-input');
  var $itemTotal = $('.item-total');
  var $totalNum = $('.total-num');
  var $cartSubmit = $('.cart-submit');
  var $cartList = $('.cart-list');
  var $cartItem = $('.cart-item');
  
  // 计算购物车总价
  function calculateTotal() {
    var total = 0;
    $itemTotal.each(function() {
      total += parseFloat($(this).text().substr(1));
    });
    $totalNum.text('￥' + total.toFixed(2));
  }
  
  // 刷新购物车项
  function refreshCartItem($cartItem, $itemNum, $itemTotal) {
    var num = parseInt($itemNum.text());
    var price = parseFloat($cartItem.find('.item-price').text().substr(1));
    $itemTotal.text('￥' + (num * price).toFixed(2));
    calculateTotal();
  }
  
  // 增加商品数量
  $cartList.on('click', '.num-btn.plus', function() {
    var $itemNum = $(this).prev();
    $itemNum.text(parseInt($itemNum.text()) + 1);
    var $itemTotal = $(this).parents('.cart-item').find('.item-total');
    refreshCartItem($(this).parents('.cart-item'), $itemNum, $itemTotal);
  });
  
  // 减少商品数量
  $cartList.on('click', '.num-btn.minus', function() {
    var $itemNum = $(this).next();
    if (parseInt($itemNum.text()) > 1) {
      $itemNum.text(parseInt($itemNum.text()) - 1);
      var $itemTotal = $(this).parents('.cart-item').find('.item-total');
      refreshCartItem($(this).parents('.cart-item'), $itemNum, $itemTotal);
    }
  });
  
  // 删除购物车项
  $cartList.on('click', '.item-delete', function() {
    $(this).parents('.cart-item').remove();
    calculateTotal();
    if ($cartItem.length == 0) {
      $cartSubmit.attr('disabled', 'disabled');
      $totalNum.text('');
    }
  });
});