如何使用jquery数据比较输入值之前/之后的两个值

Question

我正在处理一个表格，我需要比较输入的值。 比方说，我有一个来自服务器的输入，其值为name1，然后用户将其更改为name2。 如何获得初始值和新值？ 我的下面的脚本显示了我尝试解决此问题，但是当我查看控制台输出时，oldAddressNameValue没有旧值，newAddressNameValue也没有。 我究竟做错了什么？

var $el = $('#inputAddressName');
var oldAddressNameValue = $el.data('oldVal', $el.val());
console.log(oldAddressNameValue);
var newAddressNameValue = $el.change(function () {
    var $this = $(this);
    var newValue = $this.data('newVal', $this.val());
});
console.log(newAddressNameValue);

谢谢

Answer 1

data函数将值赋给属性，但随后将返回jquery链接的元素。 如果直接输出$ el.data（'oldVal'），它应该返回值。

console.log($el.data('oldVal'))

或者您可以将.data（）的单个参数版本的结果分配给变量。

Answer 2

el.change中的代码在输入更改之前不会执行，因此日志没有记录任何内容，我也不太确定您声明变量的方式。 这有效。

var $el = $('#inputAddressName');
var oldAddressNameValue = $el.val(),
    newAddressNameValue;

console.log(oldAddressNameValue);

$el.on('change', function () {
    var $this = $(this);
    $this.data('newVal', $this.val());
    newAddressNameValue = $this.val();
    console.log(newAddressNameValue); 
});

这是一个有效的例子

Answer 3

您刚刚将控制台日志放在错误的位置，下面的代码显示您的oldVal和newVal都存在。

 $(document).ready(function() { var $el = $('#inputAddressName'); var oldAddressNameValue = $el.data('oldVal', $el.val()); console.log(oldAddressNameValue.data("oldVal")); var newAddressNameValue = $el.change(function() { var $this = $(this); var newValue = $this.data('newVal', $this.val()); console.log(newAddressNameValue.data("newVal")); console.log(newAddressNameValue.data("oldVal")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="inputAddressName" value="123" type="text" /> 

Answer 4

data函数返回jQuery包装的元素。 如果要获取实际存储的值，则应使用$el.data(key) 。

这是你需要做的：

var $el = $('#inputAddressName');
$el.data('oldVal', $el.val());
$el.change(function () {
    var $this = $(this);
    $this.data('newVal', $this.val());
    console.log($this.data('oldVal'));
    console.log($this.data('newVal'));
});

这也是一个小提琴 。

Answer 5

要在JavaScript中查找<input />的初始值，只需使用defaultValue属性：

var input = document.getElementById('inputAddressName'),
    oldValue = input.defaultValue,
    newValue = input.value;

例如，在jQuery中：

$('#inputAddressName').on('change', function () {
     var el = this,
         oldValue = el.defaultValue,
         newValue = el.value;
});

 $('#inputAddressName').on('change', function () { var el = this, oldValue = el.defaultValue, newValue = el.value; console.log(oldValue, newValue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inputAddressName" value="Default value" /> 

或者，您可以使用getAttribute('value') ，它返回HTML属性中的值（当value更改时不会更新，只有value 属性更改）：

 $('#inputAddressName').on('change', function() { var el = this, oldValue = el.getAttribute('value'), newValue = el.value; console.log(oldValue, newValue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inputAddressName" value="Default value" /> 

Answer 6

尝试

 var $el = $("#inputAddressName"); $el.data({"oldVal":$el.val(), "newVal":void 0}); var oldAddressNameValue = $el.data("oldVal") , newAddressNameValue; $el.on("change", function () { var $this = $(this); $this.data("newVal", $this.val()); newAddressNameValue = $this.data("newVal"); console.log(oldAddressNameValue, newAddressNameValue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <input id="inputAddressName" value="name1" />