jquery - 输入类型编号的增量附加数字而不是递增

Question

在第一次，它正确地递增。但是，如果值发生更改，则使用箭头，则按钮增量是附加文本而不是增加文本。

var visits = 100;

function incrementStep(data) {
  visits = visits + data;
  $('#visits').val(visits);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="visits" value="100" step="100">
<span onclick="incrementStep(500)">500</span>

标签： jqueryinput

Answer 1

由于相关变量包含数字数据类型，因此绝不会附加任何内容。

问题是因为增量值存储在visits变量中。只要您通过单击向上/向下箭头手动增加/减少显示的值，控件中的值和输入的值vists就会不同步。因此，下次您单击该span值时，该值不是您所期望的。

要解决此问题，请摆脱全局变量，因为无论如何它们都是不好的做法，并增加控件中的值，直接从 DOM 读取：

jQuery($ => {
  $('span').on('click', function() {
    $('#visits').val((i, v) => parseInt(v, 10) + 500);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="visits" value="100" step="100">
<span>500</span>

请注意此示例中使用了不显眼的事件处理程序。使用内联onX属性不再是好的做法，应尽可能避免。