在更改之前获取输入的旧值并将总值更改为 + 或 -

Posted 2023-05-09

【中文标题】在更改之前获取输入的旧值并将总值更改为 + 或 -

【英文标题】：Get a old value of input before change and change total value to + or -

【发布时间】：2018-03-12 01:49:45

【问题描述】：

我想制作积分分配表格。 我有 4 个输入类型数值 0-100，总分 = 100 分。所以我们可以在每个输入中放置 25 个点。我已经可以验证输入数字 min 0 max 100 并从总更改的输入值中减去。 我在添加到 Total 时遇到问题。如果用户更改已经更改的值，我需要制作 Total + value（更改前）然后 Total - value（更改后）。 我不知道如何在改变之前获得价值。

我的html

<input type="number" min="0" max="100" name="1" />
<input type="number" min="0" max="100" name="2" />
<input type="number" min="0" max="100" name="3" />
<input type="number" min="0" max="100" name="4" />
<input type="text" id="Total" name="Total" value="100"/>

我的脚本

$("input[type=number]").keyup(function(event) 
    max=100;
  min=0;
    value=( parseInt($(this).val()));
    if(value < min || isNaN(parseInt(value))) 
        $(this).val(0)
    else if(value > max) 
        $(this).val(100);
    else return value;
);

var total, myVal;
$("input[type=number]").change(function(event) 
    maxPoints = parseInt($('#Total').val());
    myVal = ( parseInt($(this).val()) || 0);
    total = maxPoints - myVal;
    $('#Total').val(total);
);

如果我能够将旧值保存到某个 var，我会将 .onchange 脚本更改为类似的内容，我认为它应该可以工作。但是我如何才能获得旧值？

$("input[type=number]").change(function(event)     
    oldValue = ???? - how to get this ? :P
    if(oldValue>0)
        maxPoints = parseInt($('#Total').val()) + oldValue;
    else
        maxPoints = parseInt($('#Total').val());
        
    myVal = ( parseInt($(this).val()) || 0);
    total = maxPoints - myVal;
    $('#Total').val(total);
);

有 js fiddle 它现在是如何工作的。 Fiddle here

【参考方案1】：

嗨，像这样保存旧值

$("input[type=number]").change(function(event)     
    oldValue = $(this).data('oldvalue');
    if(oldValue>0)
        maxPoints = parseInt($('#Total').val()) + oldValue;
    else
        maxPoints = parseInt($('#Total').val());
        
    myVal = ( parseInt($(this).val()) || 0);
    total = maxPoints - myVal;
    $(this).data('oldvalue',$(this).val()) // update old value to new value
    $('#Total').val(total);
);

<input type="number" min="0" data-oldvalue='0' max="100" name="1" />
<input type="number" min="0" data-oldvalue='0' max="100" name="2" />
<input type="number" min="0" data-oldvalue='0' max="100" name="3" />
<input type="number" min="0" data-oldvalue='0' max="100" name="4" />
<input type="text" id="Total" name="Total" value="100"/>

【讨论】：

非常感谢 :) 它现在可以工作了，我只需要阻止分配超过 100 点的可能性，并且不要让总数低于 0 :) 稍后将进行测试。