当值可能不再存在时检测变化的最佳方法？

Question

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

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

（遗憾的是我没有在我的代码前面，但它应该是这样的）

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

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

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

我尝试使用类似

的方法连接 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 ，以防止调用原生 Function .

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

.map() 中的

x.val() 会 return 错误，因为 x 将是 DOM 元素 <input>，而不是 jQuery 对象 $(x) ;尝试利用 x.value 或 el.value 来检索循环中当前元素的值

尝试打开 console，在下面的堆栈片段中单击 "Run code snippet" 两次。尽管 error 消息在 console

处显示了 items 的内容，但 alert 似乎并未在 stacksnippets 中被调用

// 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()

当值可能不再存在时检测变化的最佳方法？

Best way to detect changes when values might not exist anymore?

javascript

jquery

jquery-ui

comparison

concatenation