如何在JavaScript的keyup事件中实现总金额与折扣的加减及原值恢复？

嘿，我来帮你搞定这个小问题！你的代码现在的问题在于，每次触发keyup事件时，你都是拿当前已经修改过的总金额来计算的——比如初始是100，输入折扣20后总金额变成80，这时候你再删除折扣，代码里的gross已经是80了，加上0还是80，自然回不到100。

核心思路很简单：把初始的总金额存起来，每次计算都基于这个原始值，而不是输入框里的当前值。下面给你两种可行的解决方案：

方案1：用jQuery的data属性存储初始值（推荐） #

这种方式更干净，不会污染全局变量，把初始值存在总金额输入框的自定义属性里：

// 页面加载完成时，把初始总金额存到输入框的data属性中
$(document).ready(function() {
    const $totalInput = $('input[name="total_gross_amount"]');
    // 转成数字类型，避免后续计算出问题
    $totalInput.data('initial-value', parseFloat($totalInput.val()));
});

$(".form-basic .grand-discount").on('keyup', function () {
    const $totalInput = $('input[name="total_gross_amount"]');
    // 取出存储的初始值
    const initialGross = $totalInput.data('initial-value');
    // 把折扣值转成数字，空值时默认设为0
    const totalDiscount = parseFloat($(this).val()) || 0;
    // 计算新总金额，用Math.max确保不会出现负数（可选，根据你的需求调整）
    const total = Math.max(initialGross - totalDiscount, 0);
    // 更新总金额输入框
    $totalInput.val(total);
});

方案2：用全局变量存储初始值 #

如果你的项目结构简单，也可以用一个全局变量来保存初始值：

// 全局变量存储初始总金额
let initialGross;

$(document).ready(function() {
    // 页面加载时获取初始值并转成数字
    initialGross = parseFloat($('input[name="total_gross_amount"]').val());
});

$(".form-basic .grand-discount").on('keyup', function () {
    const totalDiscount = parseFloat($(this).val()) || 0;
    const total = Math.max(initialGross - totalDiscount, 0);
    $('input[name="total_gross_amount"]').val(total);
});

关键细节说明 #

• 一定要用parseFloat()（或者Number()）把输入框的字符串值转成数字，不然会出现字符串拼接的问题（比如100-20变成"10020"）。
• || 0是为了处理折扣输入框为空的情况，确保空值时折扣按0计算。
• Math.max(..., 0)是可选的，用来防止总金额变成负数，如果你的业务允许负数，可以去掉这部分。

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