实时计算牛奶营养成分：输入重量后数值重复相乘问题求助

阿华AIGC实验室

2026-5-15

问题排查与解决方案

我来帮你搞定这个重复相乘的问题——核心原因很明显：你每次计算营养成分时，用的是已经被修改过的输入框数值，而不是最初的每克基准值。

举个例子：假设1克牛奶对应0.03克脂肪，第一次输入500克后，脂肪框变成15；当你把重量改成200克时，代码会用15200=3000，而不是用原始的0.03200=6，这就导致了数值持续放大的错误。

具体修改步骤

1. 给只读输入框添加原始基准值的存储

首先在HTML里，给脂肪、糖分、固形物的输入框加上data-original属性，用来保存每克牛奶对应的原始营养值：

<td><input type="text" name="name" placeholder="Weight" class='smalltextbo onlynumbers' id="w<?=$thedetails_array['sno']?>" onkeyup="return updatevalues(this);" onkeypress="return isNumber(event);" value='1'/></td>
<td><input type="text" name='fat' value="<?=$thedetails_array['fat']?>" id="fat<?=$thedetails_array['sno']?>" readonly data-original="<?=$thedetails_array['fat']?>"></td>
<td><input type="text" name='sweet' value="<?=$thedetails_array['sweet']?>" id="sweet<?=$thedetails_array['sno']?>" readonly data-original="<?=$thedetails_array['sweet']?>"></td>
<td><input type="text" name='solid1' value="<?=$thedetails_array['solid1']?>" id="solid<?=$thedetails_array['sno']?>" readonly data-original="<?=$thedetails_array['solid1']?>"></td>

2. 修改JavaScript计算逻辑

接下来调整updatevalues函数，每次计算都从data-original里取原始基准值，而不是当前输入框的数值：

function updatevalues(vale){
    // 简化ID提取逻辑
    var onlyidis = $(vale).attr("id").substr(1);
    // 把输入的重量转为数字，非有效值默认设为0
    var mainval = parseFloat($('#w'+onlyidis).val()) || 0;

    // 计算脂肪含量：原始每克值 × 当前重量
    var originalFat = parseFloat($('#fat'+onlyidis).data('original')) || 0;
    $('#fat'+onlyidis).val((originalFat * mainval).toFixed(2));

    // 计算糖分含量
    var originalSweet = parseFloat($('#sweet'+onlyidis).data('original')) || 0;
    $('#sweet'+onlyidis).val((originalSweet * mainval).toFixed(2));

    // 计算固形物含量（补上你之前遗漏的部分）
    var originalSolid = parseFloat($('#solid'+onlyidis).data('original')) || 0;
    $('#solid'+onlyidis).val((originalSolid * mainval).toFixed(2));
}