Question

目标是检测页面加载输入值是否更改后。

输入字段（例如19个字段）

<input type="text" name="date_day1" id="date_day1" value=" >
<input type="text" name="date_month1" id="date_month1" value=" >
<input type="text" name="date_year1" id="date_year1" value=" >
<input type="text" name="amount1" id="amount1" value=" >

然后像这样隐藏输入字段

<input type="text" name="is_row_changed1" id="is_row_changed1" value="">
<script>

$("#date_day1").on("change", function () {
    document.getElementById('is_row_changed1').value = 1;
});

$("#date_month1").on("change", function () {
    document.getElementById('is_row_changed1').value = 1;
});

</script>

如果在任何输入字段（19个字段）中更改了值，则需要在此隐藏输入字段中反映它（我决定将隐藏输入字段值设置为1）。

之后使用php的ajax我检查隐藏的输入字段值是否为1.如果为1，则更新mysql。目标是减少服务器资源的使用。

问题隐藏输入字段的Javascript代码很长。可能某种方式（代码）要更短（更简单）？

Answer 1

为每个输入添加一个row_changed类，然后您可以通过一次调用将它们全部定位：

$(".row_changed").on("change", function () {
document.getElementById('is_row_changed1').value = 1;
});

（您还可以使用QuickSilver的评论进一步简化它。）

Answer 2

您可以使用JQuery选择器为HTML代码中声明的所有输入元素设置相同的“输入已更改”回调：

var anyFieldChanged = false; //Global variable
function changedCallBack()
{
  anyFieldChanged = true;
  alert('Fields changed');
}

allInputs = $('input');
allInputs.each(function() { this.onchange = yourCallBack(); });

Answer 3

我不知道它是否仅在您的示例代码中，但您有几个具有相同ID的元素，这些元素无效。每个ID都应该是唯一的（这是任何ID的目的）。您可以为要跟踪的每个输入添加一个类，并选择像Shawn所说的那样，或者如果你想跟踪除了你可以使用的页面上隐藏的每个输入

$("input:[type!=hidden]").on("change", function () {
    document.getElementById('is_row_changed1').value = 1;
});

Answer 4

像这样使用。

<script>
$("#date_day1").on("change", function () {

  $('#is_row_changed1').val(1);

});

$("#date_month1").on("change", function () {

  $('#is_row_changed1').val(1);

});

// etc
</script>

如何使jquery代码更简单

4 个答案: