jquery案例计算购物车商品总件数和总额代码

在jQuery中，我们可以编写一段简单的代码来模拟一个购物车功能，计算商品的总件数和总金额。假设我们有一个包含商品信息的HTML列表，并且每个列表项都有一个“数量”和“价格”的数据属性。下面是一个示例：

<!-- HTML 示例 -->
<ul id="shoppingCart">
  <li data-item-count="2" data-item-price="10">商品A</li>
  <li data-item-count="1" data-item-price="15">商品B</li>
  <li data-item-count="3" data-item-price="5">商品C</li>
</ul>

<button id="calculateTotal">计算总金额</button>
<p id="totalItems">总件数:</p>
<p id="totalPrice">总价:</p>

然后，使用jQuery来处理计算逻辑：

$(document).ready(function() {
  // 获取所有购物车项
  var cartItems = $('#shoppingCart li');

  // 计算总件数
  function calculateTotalItems() {
    var total = 0;
    cartItems.each(function() {
      total += parseInt($(this).data('item-count'));
    });
    $('#totalItems').text(total + ' 件');
  }

  // 计算总金额
  function calculateTotalPrice() {
    var total = 0;
    cartItems.each(function() {
      total += parseInt($(this).data('item-count')) * parseFloat($(this).data('item-price'));
    });
    $('#totalPrice').text('￥' + total.toFixed(2) + ' 元');
  }

  // 绑定按钮点击事件
  $('#calculateTotal').click(function() {
    calculateTotalItems();
    calculateTotalPrice();
  });

  // 初始计算
  calculateTotalItems();
});

在这个例子中，当用户点击“计算总金额”按钮时，会触发`calculateTotalItems()`和`calculateTotalPrice()`函数，分别计算并显示购物车的总件数和总金额。