基于输入框data-attribute值与输入数值计算总和的问题求助

你的代码问题在于只累加了每个输入框的data-value值，没有结合用户在输入框里填写的数值做乘法运算。下面是修正后的代码，完全符合你的预期需求：

修正后的JS代码 #

$(document).ready(function() {
  const $total = $('#total');

  // 绑定blur和input事件，支持实时计算或失焦计算
  $('.number').on('blur input', function() {
    let sum = 0;
    $('.number').each(function() {
      // 获取用户输入值，空值/非数字自动转为0
      const inputNum = parseFloat($(this).val()) || 0;
      // 获取data-value对应的值，默认0
      const dataNum = parseFloat($(this).data('value')) || 0;
      // 累加当前输入框的贡献值：输入值 × data-value
      sum += inputNum * dataNum;
    });
    // 格式化总和为两位小数，拼接单位
    $total.val(sum.toFixed(2) + ' m³');
  });
});

关键修改说明 #

• 事件绑定优化：把单一的blur事件改成blur input，用户输入过程中就能实时更新总和，提升交互体验
• 核心计算逻辑修正：不再直接累加data-value，而是计算输入框数值 × data-value后再累加，完全匹配你的预期公式
• 异常值处理：用parseFloat(...) || 0处理空值、非数字输入，避免出现NaN错误
• 格式统一：用toFixed(2)强制保留两位小数，确保输出格式和示例一致

可选优化：限制输入为数字 #

如果要防止用户输入非数字内容，可以给输入框加个简单的输入过滤：

$('.number').on('keypress', function(e) {
  // 仅允许数字和退格键输入
  return /[0-9]/.test(String.fromCharCode(e.keyCode)) || e.keyCode === 8;
});

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