计数输入数字变化

Question

我的代码有一个小问题，更改值时我需要对输入进行计数，我的代码正在运行，但是当我使用增加按钮时，计数不更改值。

HTML代码：

<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input class="input-number" type="number" value="1" min="0" max="1000"  onchange="count(this.value);">
  <div class="input-group-button">
    <span class="input-number-increment">+</span>
  </div>  
</div>
<div class="input-group input-number-group">
<input class="input-number" type="text" id="totalcount" placeholder="0" />
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JS代码：

$('.input-number-increment').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.input-number-decrement').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val - 1);
})

/* Count. */
function count(value) {
    var Total = 0;  
    value = parseInt(value); // Convertir a numero entero (número).
    Total = document.getElementById('totalcount').value;
    // Valida y pone en cero "0".
    Total = (Total == null || Total == undefined || Total == "") ? 0 : Total;
    /* Variable genrando la suma. */
    Total = (parseInt(Total) + parseInt(value));
    // Escribir el resultado en una etiqueta "span".
    document.getElementById('totalcount').value = Total;
}

这是小提琴

当我按下+时我需要计数，或者当我按下-按钮时我需要休息，有什么想法吗？

非常感谢。

Answer 1

当用户通过键入更改输入时，将触发onchange事件侦听器。 因此.val()不会引起它启动。

您可以通过添加轻松地手动触发onchange事件

$(".input-number").change();

到代码中所需的功能。

在您的特定情况下，这应该可以解决问题：

$('.input-number-increment').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
  $(".input-number").change();
});

$('.input-number-decrement').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $(".input-number").change();
})

现在，当用户单击递增和递减按钮时，您的计数功能将执行。