如何在jQuery中计算$('.shipping').val()与$('#pay').text()的总和并写入指定元素？

需求说明：获取.shipping的取值与#pay的文本内容，将二者相加后，把计算结果写入到<span class='amount'></span>元素中。

以下是修改后的完整jQuery脚本，已添加合计计算逻辑：

<script> 
$(document).ready(function() {
  $("select.area").change(function() {
    var zone = $(this).children("option:selected").val();
    var area = $(this).children("option:selected").text();
    $('.shipping').val(zone);
    $('.address').val(area);
    // 地址变更后更新合计
    updateTotalAmount();
  });
});

function updateTotalPrice() {
  var qty = parseInt($('#qty').val(), 10);
  var price = parseFloat($('#price').attr('value'));
  var total = qty * price;
  $('#pay').text(total.toFixed(3));
  // 修正原代码错误：数量输入框需用val()设置值
  $('#qty').val(qty);
  // 商品总价更新后同步更新合计
  updateTotalAmount();
}

// 新增合计计算函数
function updateTotalAmount() {
  // 解析运费，非数值时默认取0避免NaN
  var shipping = parseFloat($('.shipping').val()) || 0;
  // 解析商品总价，非数值时默认取0避免NaN
  var payTotal = parseFloat($('#pay').text()) || 0;
  // 计算合计并保留3位小数
  var totalAmount = shipping + payTotal;
  // 将结果写入目标元素
  $('.amount').text(totalAmount.toFixed(3));
}

$(document).ready(function() {
  // 绑定数量增减按钮事件
  $('#plus-btn').click(function(event) {
    increaseCount(event, this);
  });
  $('#minus-btn').click(function(event) {
    decreaseCount(event, this);
  });
  $('#qty').change(function(event) {
    updateTotalPrice();
  });

  // 页面加载时初始化商品总价与合计
  updateTotalPrice();
  updateTotalAmount();
});
</script>

关键改动说明： #

• 新增updateTotalAmount()函数：负责处理数值解析、合计计算与结果写入，同时兼容非数值输入的情况（默认设为0）。
• 在地址选择变更事件中调用合计函数：确保运费变化时合计实时更新。
• 在商品总价更新函数末尾调用合计函数：商品总价变动时同步更新合计。
• 修正原脚本错误：原代码中用$('#qty').text(total)设置数量输入框值是错误的，改为val()方法符合输入框的操作逻辑。
• 页面加载时额外初始化合计：确保页面打开时就能显示正确的合计值。

内容的提问来源于stack exchange，提问作者Handy Eko Cahyono