проверка JQuery, если входное значение увеличивается/уменьшается на изменениях

Question

У меня есть номер типа входного сигнала

<input type="number" value="5" id="nmovimentos"/> 

Я хочу сделать especific действия, когда значение увеличивается или уменьшается (предупреждения для более простого примера).

У меня есть следующий код JQuery:

$(document).ready(function(){ 
    var oldValue = $("#nmovimentos").val(); 
    $("#nmovimentos").change(function(){ 
    var newValue = $(this).val(); 
    if (newValue > oldValue) 
     alert("increase!"); 
    else 
     alert("decrease!"); 
    }); 
}); 

Но это не работает, потому что он не может обнаружить вар OldValue .. поэтому любые подсказки о том, как сделать это? Большое спасибо!

Jsfiddle

Answer 1

Вы можете использовать какую-то собственность каждого HTMLInputElement должно хранить предыдущее значение, например defaultValue. В этом случае вы сохраните несколько строк кода, и сделать код немного чище и лаконичным:

$("#nmovimentos").change(function() { 
 
    var direction = this.defaultValue < this.value 
 
    this.defaultValue = this.value; 
 
    if (direction) alert("increase!"); 
 
    else alert("decrease!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" value="5" id="nmovimentos" />

Answer 2

Обновление oldValue в обработчике

$(document).ready(function() { 
 
var oldValue = $("#nmovimentos").val(); 
 
    $("#nmovimentos").change(function() { 
 
    var newValue = $(this).val(); 
 
    if (newValue > oldValue) 
 
     console.log("increase!"); 
 
    else 
 
     console.log("decrease!"); 
 

 
    oldValue = newValue; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<input type="number" value="5" id="nmovimentos" />

Или используйте атрибут data-*, чтобы сохранить трек

$(document).ready(function() { 
 
    $("#nmovimentos").attr('data-prev-val', $("#nmovimentos").val()); 
 
    $("#nmovimentos").change(function() { 
 
    var newValue = $(this).val(); 
 
    if (newValue > $(this).attr('data-prev-val')) 
 
     console.log("increase!"); 
 
    else 
 
     console.log("decrease!"); 
 

 
    $("#nmovimentos").attr('data-prev-val', newValue); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<input type="number" value="5" id="nmovimentos" />

Answer 3

Вам нужно сначала сохранить старое значение. jQuery.data() удобен для этого.

$(document).ready(function(){ 
 
    var nmovimentos = $("#nmovimentos"); 
 
    var oldValue = nmovimentos.val(); 
 
    nmovimentos.data("oldValue", oldValue); 
 
    
 
    $("#nmovimentos").change(function(){ 
 
    var oldValue = $(this).data("oldValue"); 
 
    var newValue = $(this).val(); 
 
    if (newValue > oldValue) 
 
     alert("increase!"); 
 
    else 
 
     alert("decrease!"); 
 
    $(this).data("oldValue", newValue); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="number" value="5" id="nmovimentos"/>