Question

我有一个必须动态更改的值：原始值为6，我可以自定义它。如果我把7放在一个输入框上，我现在有13个。当我添加另一个数字时，例如71我的值改变了13 + 71.我想用前一个值（7）减去13得到我原来的一个是6.

这是我的代码：

＆＃13;

$('.test :input').on('input', function(){

var ok = $('.ok');
ok.text(parseFloat(ok.text()) + parseFloat($(this).val()))
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok" style="background-color: white">
6
</div>
<div class="test">
<input type="text"/>
</div>

＆＃13;

如果你尝试输入45，你应该有51，你有55。

我已经尝试过＆＃34;聚焦＆＃34;如某些线程所示，但我没有留下输入，所以它不起作用。我不知道如何获得我以前的价值。

Answer 1

你要求的并不完全清楚。但我可以看到你的选择器是错误的。此外，您还需要确保在查询文档之前加载文档。

我将事件监听器更改为onChange，以便每次按键都不会发生添加。

$(document).ready(function() {
  $('.test input').on('change', function() {
    var ok = $('.ok');
    ok.text(parseFloat(ok.text()) + parseFloat($(this).val()))
  })
});

这里有一个plunker正在运行这是对你所问的问题的另一种猜测plunker。其中将初始值存储为属性。

$(document).ready(function() {
  var ok = $('.ok');

  $('.ok').text(ok.attr('data-initial-value'));
  $('.test input').on('change', function() {
    ok.text(parseFloat(ok.attr('data-initial-value')) + parseFloat($(this).val()))
  })
});

<div class="ok" data-initial-value="6" style="background-color: white">
  </div>

Answer 2

正如@Doug建议的那样，您可以使用属性来存储初始值：

$('input').on('input', function() {
  var ok = $('.ok');
  ok.text(+(ok.attr('i')) + +($(this).val() || 0))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ok" i="6">6</div>
<input type="text" />

Answer 3

感谢大家的帮助和提示，并对于凌乱的解释感到抱歉......

这是我所做的并且它有效：当我聚焦时，我将旧值放在一个属性中，然后当我添加数字时，我用存储的数字减去我的实际数字。

$('.test input').on('focus', function(){

$(this).attr('value', $(this).val());

});


$('.test input').on('change', function(){
    var valActuelle = 0;
    if($(this).attr('value') !== ''){
        valActuelle = $(this).attr('value');
    }

var ok = $('.ok');
ok.text(( parseFloat(ok.text())  - parseFloat(valActuelle)) + parseFloat($(this).val()) );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok" style="background-color: white">
6
</div>
<div class="test">
<input type="text"/>
</div>

只有当你失去焦点时它才有效但在我的情况下我总是失去焦点

获取输入事件的先前值

3 个答案: