2016-11-02 33 views
4

Ich möchte Website Klasse eines Elements ändern, wenn es gefüllt ist. Wenn also der Benutzer blur aus einem Eingabefeld heraus überprüft, prüft das Programm, ob es einen Wert hat und wenn ja, fügt eine Klasse hinzu. Das Problem besteht darin, dieses Verhalten an jedes Element in der Klassenauflistung zu übergeben.Trigger-Ereignis für jedes Objekt

var input = document.getElementsByClassName('input'); 
contentCheck = function(i){ 
    if(input[i].value>0) input[i].classList.add('filled'); 
    else input[i].classList.remove('filled'); 
}; 
for(var i=0; i<input.length; i++) { 
    input[i].addEventListener('blur',contentCheck(i)); 
} 

Dies funktioniert einmal nach Neuladen der Seite (wenn es irgendwelche Inhalte im Cache ist), aber contentCheck() sollte jedes Mal auslösen Sie den Fokus zu verlassen.

Antwort

4

Sie haben Halb angelegte „closures in loops“ Lösung auf diesen Code, aber Sie brauchen nicht die Verschlüsse in Schleifen Lösung, verwenden Sie einfach this innerhalb contentCheck und weisen es als Handler (anstatt sie zu fordern und mit ihrem Rückgabewert als Handler):

var input = document.getElementsByClassName('input'); 
var contentCheck = function(){ // <== No `i` argument (and note the `var`) 
    // Use `this` here 
    if(this.value>0) this.classList.add('filled'); 
    else this.classList.remove('filled'); 
}; 
for(var i=0; i<input.length; i++) { 
    input[i].addEventListener('blur',contentCheck); 
    // No() here -------------------------------------^ 
} 

Randbemerkung: classList verfügt über eine praktische toggle Funktion, die eine optionale Flag nimmt:


Wenn benötigt, um die „Verschlüsse in loops“ Lösung (wieder, nicht wahr, sondern nur der Vollständigkeit halber), dann würden Sie contentCheckRückkehr eine Funktion haben, die die Kontrolle haben:

Hinweis Ich änderte den Namen wegen der Klarheit über das, was es tut.

Verwandte Themen