如何确定在 .keyup jquery 方法调用上触发了哪个元素？答案

【问题标题】：How to determine which element fired on .keyup jquery method call?如何确定在 .keyup jquery 方法调用上触发了哪个元素？
【发布时间】：2013-09-03 02:39:40
【问题描述】：

例如：

  $('.input-xlarge').keyup(function(element) {
              element.parent().parent().removeClass("error success");
          });

场景：

我在 .input-xlarge 类下有许多输入字段，它们在提交表单后根据成功状态显示为绿色或红色。（非ajax形式）

现在我希望它对用户更加友好 - 当从服务器返回字段状态时，我的字段会一直发红光，直到下一次使用有效输入的提交开始。

需要什么：

因此，在用户提交表单后，收到了一些字段 - 一些处于有效状态，一些处于无效状态我希望字段在用户开始输入时成为中性装饰。

什么不起作用：

根据我提供的代码，我期望：

在用户开始输入时触发任何具有 .input-xlarge 类的输入字段的事件。
指明哪个输入字段确切需要将 css 装饰（删除 css 类）更改为中性白色。

不幸的是，我似乎无法提取触发 .keyup 事件的实际输入元素。可以这样做吗？

如您所见，我知道之后指向 css 元素的确切导航，但根对象最终出现错误：

Uncaught TypeError: Object #<Object> has no method 'parent'

【问题讨论】：

我不太确定如何在我的情况下应用它。它不是事件处理程序，而只是触发焦点的一种方法？还是我错了？
@Aubergine 你可以在MDN阅读更多关于this的信息

标签： jquery element typing

【解决方案1】：

在函数内部，您可以使用this 来获取触发该函数的元素。使用这个：

$('.input-xlarge').keyup(function() {
    $(this).parent().parent().removeClass("error success");
});

函数中的第一个参数是事件。另一种方法是在事件对象上使用 currentTarget（与this 相同）：

$('.input-xlarge').keyup(function(e) {
    $(e.currentTarget).parent().parent().removeClass("error success");
});

另外，不要害怕使用console.log()。在案例中使用它会告诉您element 是一个事件。

【讨论】：

竞争很激烈 :-) 非常感谢！
啊哈！对于像这样的琐碎情况，我更经常使用警报。但它只显示[Object object]，现在尝试控制台，确实是事件！

【解决方案2】：

您可以在事件处理程序中使用this 来引用处理程序注册到的元素 - 在本例中为输入元素。

事件处理程序的第一个参数是event对象，在事件对象中你可以使用event.target定位触发事件的实际元素，event.currentTaget引用注册处理程序的元素.

$('.input-xlarge').keyup(function(event) {
    $(this).parent().parent().removeClass("error success");
});

阅读更多关于this

【讨论】：

【解决方案3】：

或者，当不使用特定于类的选择器时（例如 $('#form').change），您可以将事件传递给回调函数，如下所示：

    $('#SomeForm').change(function (event) {        
            if (event.target.id === "SomeElementId") {
            // do whatever you need. 
            }
     });

【讨论】：