javascript : 클래스 이름별로 함수 호출

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

단순히 반복 모든 (과 좋은 오래된 : 루프 용) 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); 
    } 
}