javascript：classnameで関数を呼び出す

Question

classNameでバインドされたスクリプトを作成しようとしていて、別の関数を呼び出しています。

私はこのコードをclassNameの最初のインスタンスに使用していますが、スクリプトの最初の行にある[0]を削除しても機能しなくなりました。

<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> 

は、どのように私はそれがclassName="Bound"ですべての入力のために働くのですか？私はjQueryソリューションは必要ありません。

ありがとうございます。

Answer 1

すべての要素を繰り返し処理するには、ループを使用します。

使用Array#forEach、forEach()方法は、一度配列要素ごとに設けられた機能を実行します。

別の代替を使用すると、返される結果の上に直接Array#メソッドを呼び出すことができるようにgetElementsByClassNameによって返さHTMLCollection上Array.fromを使用することができました。

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" />

注：

• [].forEach.callを理解するためにWhat does [].forEach.call() do in JavaScript? を参照してください。
• コメント内で示唆されているように、for-loopを使用して、 HTMLCollectionを繰り返すこともできます。
• 限りBrowser compatibility が懸念されるとして、一つはNodeList上 Polyfill

Answer 2

反復を使用して、要素にイベントハンドラをアタッチできます。

// 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

単に（:) forループ古き良きで）NodeList内のすべてのNode（複数可）を繰り返す

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