5

例如：

  $('.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'

在此处输入图像描述

4

3 回答 3

11

在函数内部，您可以使用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是一个事件。

于 2013-09-03T02:47:31.893 回答
3

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

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

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

阅读有关此的更多信息

于 2013-09-03T02:45:44.650 回答
2

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

    $('#SomeForm').change(function (event) {        
            if (event.target.id === "SomeElementId") {
            // do whatever you need. 
            }
     });
于 2014-03-07T16:37:14.157 回答