Jak ustalić, który element został wywołany przy wywołaniu metody jquery .keyup?

Question

Na przykład:

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

Scenariusz:

Mam wiele pól wejściowych do grupy .input-Xlarge, są koloru zielonego lub czerwonego w zależności od stanu sukcesu po przesłaniu formularza. (formularz nie-ajaxowy)

Teraz chcę, aby był bardziej przyjazny dla użytkownika - ponieważ stan pola jest zwracany z powrotem do serwera, moje pole świeci się na czerwono, dopóki nie zostanie rozpoczęte następne przesyłanie z prawidłowym wejściem.

Co jest potrzebne:

Dlatego po formularzu użytkownika złożony, otrzymał kilka pól - niektóre w poprawny, niektóre w nieprawidłowym stanie chcę być neutralne pole do dekoracji gdy użytkownik zaczyna wpisywać wewnątrz.

Co nie działa:

z kodu I przewidzianego Spodziewam:

1. aby wyzwolić zdarzenie dla każdego pola wejściowego z klasy .input-Xlarge gdy użytkownik rozpoczyna wpisywanie.
2. Należy wskazać, które pole wejściowe dokładnie wymaga zmiany dekoracji css (usunięcie klas css) na neutralną biel.

Niestety nie mogę wydobyć rzeczywistego elementu wejściowego, który wywołał zdarzenie .keyup. Czy można to zrobić?

Jak widać wiem dokładną nawigację w kierunku elementu css potem ale obiekt główny kończy się błędem:

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

Answer 1

wewnątrz funkcji, można użyć this uzyskać element, który wywołał funkcję. Użyj tego:

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

Pierwszym parametrem funkcji jest wydarzenie.Innym sposobem byłoby wykorzystanie na currentTarget obiektu zdarzenia (który jest taki sam jak this):

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

Ponadto, nie będzie się bać używać console.log(). Używanie go w tej sprawie wskazywałoby, że wydarzenie to było element.

Answer 2

można wykorzystać this wewnątrz obsługi zdarzeń do odnoszą się do elementu, do którego został zarejestrowany przewodnik - w tym przypadku do elementu wejściowego.

Pierwszy parametr do procedury obsługi zdarzenia jest obiekt event w obiekcie zdarzenia można użyć event.target kierować rzeczywisty element, który wywołał zdarzenie i event.currentTaget odnieść element, w którym został zarejestrowany obsługi.

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

Przeczytaj więcej o this

Answer 3

Alternatywnie, gdy nie jest używany przełącznik specyficzny jako klasa (takich jak $ („forma #”) zmianie.) Można przekazać zdarzenie do funkcji zwrotnej tak:

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