javascript - 当值可能不再存在时检测更改的最佳方法？

Question

我一直在尝试检测网页上多个输入的变化。 为此，我使用了如下查询:

$(.InputClass).data("InitialValues",$(.InputClass).serialize())

(遗憾的是我不在我的代码前面，但它应该看起来像这样)

后来我将 .data 中的值与新值进行了比较，它工作得非常好，但只有一件事是 GridGiew。

在该 GridView 中，用户可以动态添加或删除行(添加或删除数据)。如果我将初始值保存在 .data 中，它将与该行一起被销毁，并且两者都将是未定义的(初始值和新值)。我需要检查的输入是隐藏的，可以使用 $(.myNewClass).val() 访问唯一值(因为我尝试为这个特定的隐藏输入使用不同的类)

我想知道什么是最好的解决方案。

我尝试使用类似的方法连接 myNewClass 中的所有 val()

var initialValues = $(.myNewClass).map(Function(x){ 
    return x.val()
})

(再说一遍，我不在电脑前，而且我对 javascript 和 jquery 很陌生)。 它不起作用。 Intellisense 无法看到 .map(并且崩溃了)。

如果没有更好的方法，您能帮助我记录 val() 值的串联吗？

如果有更好的方法，请您指出正确的方向吗？

非常感谢!

Answer 1

在

var initialValues = $(.myNewClass).map(Function(x){ 
    return x.val()
})

.myNewClass应该是String ，在引号内 $(".myNewClass") .

F在.map()回调应该是小写 f ，防止调用 native Function .

x在 .map(x) 的第一个参数处将是 index元素或对象集合中的元素或对象的 - 不是元素；尝试调整为.map()回调函数参数为.map(function(index, elem))与循环内的值相对应。

x.val() .map()内将返回错误，如 x将是 DOM元素<input> ，而不是 jQuery 对象 $(x) ;尝试利用x.value ，或el.value检索循环内当前元素的值

尝试打开console ，在下面的 stacksnippets 中单击“运行代码片段”两次。 alert尽管 error 似乎没有在 stacksnippets 中被调用消息显示 items 的内容在console

<小时/>

// create `items` object , 
// containing `initialValues` , `currentValues` properties,
// set initially to `undefined` ; set to `Array` 
// at `load` , `unload` events   
var items = {
  "initialValues": undefined,
  "currentValues": undefined
};
$(window)
  .on({
    "load": function() {
      // set `items.initialValues` array
      items.initialValues = $(".myNewClass").map(function(index, elem) {
        return elem.value
      }).toArray();
      console.log("load", items);
    },
    "unload": function() {
      // set `items.currentValues` array
      items.currentValues = $(".myNewClass").map(function(index, elem) {
        return elem.value
      }).toArray();
      console.log("unload", items);
      alert(JSON.stringify(items, null, 4));
    }
  });

  $(function() {
    setTimeout(function() {
      // do stuff
      // remove first `.myNewClass` element "row"
      $(".myNewClass").first().remove();
      // change element at index 3 within `.myNewClass` collection
      $(".myNewClass").eq(3).val(123);
    }, 1500);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="hidden" value="1" class="myNewClass" />
<input type="hidden" value="2" class="myNewClass" />
<input type="hidden" value="3" class="myNewClass" />
<input type="hidden" value="4" class="myNewClass" />
<input type="hidden" value="5" class="myNewClass" />

参见 .map() , .toArray()