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

数据函数将值赋给属性，但随后将返回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); 
});

A working example here

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

还有here is a fiddle。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

尝试

＆＃13;

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

＆＃13;

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

＆＃13;

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

6 个答案: