输入 ID 的 Jquery 数组检测更改

Question

我有一个关于检测输入 ID 数组中的输入是否发生变化的问题。

例如，我有一个输入 ID 数组：var arrayOfInputs = ['#firstname', '#lastname', '#email', '#phone'];

我的问题是我想检测这些字段中的任何输入更改，但我不想分别为每个输入字段编写庞大的脚本代码。

所以问题是：有没有办法用 jQuery 用一两行代码检测数组中所有这些输入的输入变化？

也许我应该使用 ID 数组以外的东西？

Answer 1

所以问题是：有没有办法用 jQuery 用一两行代码检测数组中所有这些输入的输入变化？

是的：

$(arrayOfInputs.join(",")).on("change", function() {
    // Here, `this` will refer to the input that changed
});

现场演示：

var arrayOfInputs = ['#firstname', '#lastname', '#email', '#phone'];
$(arrayOfInputs.join(",")).on("change", function() {
  snippet.log(this.id + " changed");
});

<div><input type="text" id="firstname"></div>
<div><input type="text" id="lastname"></div>
<div><input type="text" id="email"></div>
<div><input type="text" id="phone"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

也许我应该使用 ID 数组以外的东西？

是的，给他们一个通用类或data-* 属性或其他东西，而不是列出 ID。

现场演示：

$(".watch-me").on("change", function() {
  snippet.log(this.id + " changed");
});

<div><input type="text" class="watch-me" id="firstname"></div>
<div><input type="text" class="watch-me" id="lastname"></div>
<div><input type="text" class="watch-me" id="email"></div>
<div><input type="text" class="watch-me" id="phone"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

您可以使用 each() 在排序代码中执行此操作。

var arrayOfInputs = ['#firstname', '#lastname', '#email', '#phone'];
$.each(arrayOfInputs, function(index, data){
  $(data).on('change',function(){
     alert($(this).val());
  });
});