jQuery实现无直接输入时从totalFee扣15至final_dues问题排查

修正后的代码 #

$(document).on(
  "change",
  "#renewal_boat_fees, #new_boat_fees, #totalFee",
  function () {
    // 将字符串值转为数字，同时处理空值/非数字输入
    var renewalFee = parseFloat($("#renewal_boat_fees").val()) || 0;
    var newBoatFee = parseFloat($("#new_boat_fees").val()) || 0;
    var totalFee = parseFloat($("#totalFee").val()) || 0;
    var result;

    // 基于数字值做条件判断
    if (renewalFee >= 15 || newBoatFee >= 15) {
      result = totalFee - 15;
    } else {
      // 条件不满足时，final_dues直接等于totalFee
      result = totalFee;
    }

    $("#final_dues").val(result);
  }
);

原代码的问题分析 #

• 变量作用域错误：原代码中result仅在if代码块内声明，当条件不满足时result未被定义，赋值给final_dues时会传入undefined，导致字段无显示。
• 字符串未转数字：通过val()获取的字段值是字符串类型，直接进行数值比较或运算可能引发异常（例如空值、非数字字符会导致计算失败），必须显式转换为数字类型，并用|| 0处理空值或无效输入。
• 缺失条件不满足的处理逻辑：原代码仅定义了条件满足时的计算逻辑，未覆盖条件不满足的场景，导致多数情况下final_dues没有赋值。

内容的提问来源于stack exchange，提问作者user1607681