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

Question

例如：

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

情境：

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

现在我希望它更加用户友好 - 因为字段状态从服务器返回，我的字段一直保持红色，直到下一次提交有效输入为止。

需要什么：

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

什么行不通：

从我提供的代码中我期望：

1. 每当用户开始输入时，使用类.input-xlarge触发任何输入字段的事件。
2. 指明哪个输入字段确实需要将css修饰（删除css类）更改为中性白色。

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

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

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

Answer 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是一个事件。

Answer 2

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

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

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

详细了解this

Answer 3

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

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