标识组(数组）中哪个输入触发的事件处理程序

Identifying which input triggered event handler from a group (array)

本文关键字：输入 程序 事件处理 数组 标识      更新时间：2023-09-26

我有一组具有相同名称属性的复选框。。

<input type="checkbox" name="someDude" value="true" > Joe
<input type="checkbox" name="someDude" value="true" > Jack
<input type="checkbox" name="someDude" value="true" > Ralph

我通过jQuery将这些家伙作为一个数组，并为他们的onChange事件分配一个事件处理程序，比如…

 var myJQuery = jQuery.noConflict(true);
var dudes = myJQuery('input[name=someDude]');
for (var i = 0; i < dudes.length; i++) {
   dudes[i].onchange = function (e) {
    alert("I am " + this.name);
 }
}

在事件处理程序onChange函数中，是否有一种方法可以知道它们中的哪一个被单击了？由于他们的名字都一样，我不能简单地做我正在尝试的事情。即使我能得到索引，那也足够了。

如果我们能做到这一点而不添加任何HTML，那就太好了。

在事件处理程序onChange函数中，是否有一种方法可以知道它们中的哪一个被单击了？

是的，单击了this。所以通常情况下，你不需要做一些事情，比如获取它的索引。不过，您可以使用index(element):

var index = dudes.index(this);

但是，你通常不需要。例如，这显示了点击元素后的文本节点的值：

var myJQuery = jQuery.noConflict(true);
var dudes = myJQuery('input[name=someDude]');
for (var i = 0; i < dudes.length; i++) {
  dudes[i].onchange = function (e) {
    alert("I am " + this.name + ", " + this.nextSibling.nodeValue);
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="someDude" value="true" > Joe
<input type="checkbox" name="someDude" value="true" > Jack
<input type="checkbox" name="someDude" value="true" > Ralph

(我实际上不建议获得下面节点的值，这只是一个例子，证明this指的是实际点击的元素。我会将输入及其相关标签放在label元素中，然后使用标签的.text()。(

请注意，有一种更简单的方法可以将点击处理程序附加到这些元素，并且可以避免在循环中不必要地创建函数：

var myJQuery = jQuery.noConflict(true);
var dudes = myJQuery('input[name=someDude]');
dudes.on("change", function(e) {
    alert("I am " + this.name);
});

this仍然如前所示工作：它指的是与单击相关的实际元素。

this将为您提供与之交互的对象。

你的问题是它们之间几乎没有什么区别。

明智的方法是做一些可以让你做到这一点的事情，即使JS失败了，数据作为常规表单提交发送到服务器。

给他们不同的价值观。

<input type="checkbox" name="someDude" value="Joe"> Joe

然后你可以检查：

this.value

$('input[name="someDude"]').on('click', function() {
    alert("My index is: " + $(this).index());
}

看看index((方法。(

您可以使用一个立即调用的函数表达式来创建一个范围，这样每个事件处理程序都将有自己的索引变量：

for (var i = 0; i < dudes.length; i++) {
  (function(i){
    dudes[i].onchange = function (e) {
      alert("I am number " + i);
    }
  })(i);
}
相关文章：