jQuery表单清空sold输入后如何恢复quantity的原始值

问题根源 #

原有代码未存储quantity输入框的初始值，且每次计算逻辑都基于quantity的当前值做减法，空输入框转Number类型会得到0，因此清空sold输入时无法恢复到初始的30。同时原有计算逻辑存在缺陷：多次修改sold值时，会在上一次扣减后的剩余量基础上再次扣减，不符合库存剩余=初始库存-已售数量的正常逻辑。

调整后代码 #

仅需要修改JS部分即可，HTML代码保持原有不变：

$(document).ready(function() {
  // 页面加载时存储quantity的初始值
  const initQuantity = Number($("#quantity").val());

  $("#sold").keyup(function() {
    const soldInput = $("#sold").val().trim();
    // 当sold输入为空，或输入内容不是有效数字时，重置quantity为初始值
    if (!soldInput || isNaN(Number(soldInput))) {
      $("#quantity").val(initQuantity);
      return;
    }
    // 正常计算剩余量：初始值减去已售数值
    const remain = initQuantity - Number(soldInput);
    $("#quantity").val(remain);
  });
});

可选优化 #

如果不需要允许用户手动修改quantity输入框的数值，可以给input加上readonly属性，避免手动修改打乱计算逻辑：

<input type="text" id="quantity" value="30" readonly>

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