利用jQuery实现商品计数单价

给每个商品添加一个数量和单价的输入框，然后在jQuery中监听数量输入框的变化，计算出总价并显示在页面上。

HTML代码：

<div class="product">
  <span class="name">商品A</span>
  <input class="quantity" type="number" value="1">
  <span class="price">10</span>
  <span class="total"></span>
</div>
<div class="product">
  <span class="name">商品B</span>
  <input class="quantity" type="number" value="1">
  <span class="price">20</span>
  <span class="total"></span>
</div>
<div class="product">
  <span class="name">商品C</span>
  <input class="quantity" type="number" value="1">
  <span class="price">30</span>
  <span class="total"></span>
</div>

jQuery代码：

$('.quantity').on('change', function() {
  var $product = $(this).closest('.product');
  var quantity = parseFloat($(this).val());
  var price = parseFloat($product.find('.price').text());
  var total = quantity * price;
  $product.find('.total').text(total);
});

解释：

通过.closest()方法找到当前输入框所在的.product元素。
获取输入框的数量和.price元素的价格，并计算出总价。
将计算出的总价显示在.total元素中。