读取动态更新的属性值jquery

Question

我在这里有一个情况.我正在按时间顺序写这种情况.

1. 假设有一个input[type=number]和一个按钮.
2. 单击该按钮时,它会将属性值更改(data-oldval="")为输入数字的当前值.
3. 下次单击该按钮时,它应该在输入中添加当前值以及data-oldval属性中的数字.
4. 但问题是,我无法读取新更新的属性值.

为了使情况更清楚,我在下面添加了代码段.我希望这里的任何人都可以帮助我.

var response = $('.response');

$('body').on('click', '.btn', function() {
  var btn = $(this),
    t = btn.parent('.dummy'),
    n = t.find('input[type=number]'),
    val = n.val(),
    oldval = n.data('oldval');

  n.attr('data-oldval', val+oldval);

  response.text(n.data('oldval'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">
  <input type="number" value="1" data-oldval="0">
  <button class="btn" type="submit">Add</button>
</div>

<div class="response"></div>

Answer 1

两个问题; 您需要使用data('oldval')而不是检索值attr(),并且还需要转换val()为整数,以便将其添加到旧值.试试这个:

var response = $('.response');

$('body').on('click', '.btn', function() {
  var btn = $(this),
    t = btn.parent('.dummy'),
    n = t.find('input[type=number]'),
    val = parseInt(n.val(), 10),
    oldval = n.data('oldval');

  n.data('oldval', val + oldval);

  response.text(n.data('oldval'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">
  <input type="number" value="1" data-oldval="0">
  <button class="btn" type="submit">Add</button>
</div>

<div class="response"></div>