javascript: Aufruf der Funktion nach Klassennamen

Question

Der Versuch, ein Skript zu erstellen, das an className gebunden ist und eine andere Funktion aufruft.

Ich habe diesen Code für die erste Instanz von ClassName, aber wenn ich die [0] in der ersten Zeile des Skripts entfernen, funktioniert es nicht mehr.

<input type="text" value="NOTBound" class="NOTBound"/> 
    <input type="text" value="Bound value 1" class="Bound"/> 
    <input type="text" value="NOTBound" class="NOTBound"/> 
    <input type="text" value="Bound value 2" class="Bound"/> 
    <script> 
    inputBound = document.getElementsByClassName('Bound')[0]; 
    inputBound.onfocus = function() { 
     var input = this.value; 
     formFunct(input); 
    } 
    function formFunct(input) { 
     console.log('done did the form Funct: ' + input) 
    } 
    </script> 

Wie bekomme ich es mit className="Bound" für alle Eingänge zu arbeiten? Ich brauche keine jQuery-Lösung.

Vielen Dank.

Answer 1

Verwenden Sie eine Schleife, um alle Elemente zu durchlaufen.

Verwenden Array#forEach führt forEach() Verfahren eine Funktion vorgesehen einmal pro Array-Element.

Eine weitere alternative konnte Array.from über HTMLCollection von getElementsByClassName zurück zu verwenden, so dass Sie Array# Methoden direkt über zurückgegebene Ergebnis aufrufen kann.

var inputBound = document.getElementsByClassName('Bound'); 
 
[].forEach.call(inputBound, function(inputBound) { 
 
    inputBound.onfocus = function() { 
 
    var input = this.value; 
 
    formFunct(input); 
 
    } 
 
}) 
 

 
function formFunct(input) { 
 
    console.log('done did the form Funct: ' + input) 
 
}

<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 1" class="Bound" /> 
 
<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 2" class="Bound" />

Hinweise:

• Refer What does [].forEach.call() do in JavaScript? [].forEach.call zu verstehen.
• Wie in den Kommentaren empfohlen, können Sie auch for-loop verwenden, um HTMLCollection zu iterieren.
• Soweit Browser compatibility betrifft, so könnte man Polyfill

Answer 2

Iterate über NodeList verwenden und Event-Handler an das Element befestigen.

// get all elements and convert to array 
 
Array.from(document.getElementsByClassName('Bound')) 
 
    // iterate overa array elements 
 
    .forEach(function(ele) { 
 
    // bind event handler 
 
    ele.onfocus = function() { 
 
     var input = this.value; 
 
     formFunct(input); 
 
    } 
 
    }); 
 

 
function formFunct(input) { 
 
    console.log('done did the form Funct: ' + input) 
 
}

<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 1" class="Bound" /> 
 
<input type="text" value="NOTBound" class="NOTBound" /> 
 
<input type="text" value="Bound value 2" class="Bound" />

Answer 3

einfach durchlaufen alle Node (n) in einem NodeList (mit einem guten alten for-Schleife :))

inputBounds = document.getElementsByClassName('Bound'); 
for(var counter = 0; counter < inputBounds.length; inputBounds++) 
{ 
    inputBounds.item(counter).onfocus = function() { 
     var input = this.value; 
     formFunct(input); 
    } 
}