計數輸入數字變化

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();
})

現在，當用戶單擊遞增和遞減按鈕時，您的計數功能將執行。