jquery -购物车案例，已拿意向书

以下是一个简化版的购物车示例，使用jQuery来增加和减少商品数量，并计算总价：

HTML:

<div id="cart">
  <table>
    <thead>
      <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>商品A</td>
        <td>$100</td>
        <td>
          <button class="minus-btn">-</button>
          <input class="quantity-input" type="text" value="1" />
          <button class="plus-btn">+</button>
        </td>
        <td class="sub-total">$100</td>
      </tr>
      <!-- 其他商品行 -->
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">总计：</td>
        <td id="total">$100</td>
      </tr>
    </tfoot>
  </table>
</div>

jQuery:

$(document).ready(function(){
  $('.plus-btn').click(function(){
    var input = $(this).siblings('.quantity-input');
    input.val(parseInt(input.val(), 10) + 1);
    updateSubTotal(input);
    updateTotal();
  });
 
  $('.minus-btn').click(function(){
    var input = $(this).siblings('.quantity-input');
    input.val(parseInt(input.val(), 10) - 1);
    updateSubTotal(input);
    updateTotal();
  });
 
  function updateSubTotal(input) {
    var price = input.closest('tr').find('td:first').next().text();
    var quantity = input.val();
    input.closest('tr').find('.sub-total').text('$' + (price * quantity).toFixed(2));
  }
 
  function updateTotal() {
    var total = 0;
    $('#cart tbody tr').each(function() {
      var subTotal = parseFloat($(this).find('.sub-total').text().replace(/[^\d.]/g, ''));
      total += subTotal;
    });
    $('#total').text('$' + total.toFixed(2));
  }
});

这段代码实现了基本的购物车功能：用户可以通过点击加号或减号按钮来增加或减少商品数量，同时每次操作后小计会实时更新，总价也会随着更新。注意，实际应用中你可能需要为每个商品设置独立的价格，这里为了简化，我们假设价格是写在HTML中的。