요소

Question

내 경우 기능을 추가 할 때 "I"값을 유지 :

var tds = document.getElementsByTagName("td"); 
for(i=0;i<tds.length;i++) 
{ 
    tds[i].onclick = function() 
         { 
          alert(i); 
         }; 
} 

예상 결과는 : TD의 수를 알림.

그러나 TD가 6 개인 경우 반환 값은 항상 "i"의 마지막 값이됩니다. (6) "i"값을 함수에 추가 할 때 값을 그대로 유지하려면 어떻게해야합니까?

감사합니다.

http://jsfiddle.net/nuKEK/11/

Answer 1

당신은 i 값을 캡처하는 폐쇄를 확인해야합니다. 이

function createFunction(i){ 
    return function(){ 
     alert(i); 
    }; 
} 

var tds = document.getElementsByTagName("td"); 
for(i=0;i<tds.length;i++){ 
    tds[i].onclick = createFunction(i); 
} 

DEMO 식으로 뭔가 : http://jsfiddle.net/nuKEK/12/

Answer 2

이는 대부분의 언어처럼 범위 막지한다는 점에서 자바 스크립트의 일반적인 실수 중 하나입니다. 함수 범위입니다.

이 작업을 수행하려면 onclick 주위에 클로저를 만들어야합니다.

for (i = 0; i < tds.length; i++) { 

    (function (index) { 
     tds[index].onclick = function() { 
      alert(index); 
     }; 
    })(i); 

} 

Answer 3

당신은 값보다는에 참조를 얻기 위해 다른 함수에 i를 전달할 수 있습니다. 자바 스크립트에서는 숫자가 값으로 전달됩니다. 그 자체 실행 익명 함수는 루프의 맥락에서 약간의 털이 보이는 경우

tds[i].onclick = (function(x) { 
    return function() { 
     alert(x); // alerting x, i's value 
    }; 
})(i); // passing i as parameter x 

, 대신 Array.prototype.forEach()을 시도 할 수 :

[].forEach.call(document.getElementsByTagName("td"), function(td, i) { 
    td.onclick = function() { 
     alert(i); 
    }; 
}); 

[편집]이 these options and their performance에서보세요.

Answer 4

var tds = document.getElementsByTagName("td"); 
for(i=0;i<tds.length;i++) 
{ 
    addClick(tds, i); 
} 


function addClick(where, i) { 
    where[i].onclick = function() 
    { 
     alert(i); 
    }; 
} 

Answer 5

콜백이 실행될 때 계속 남아있는 범위로 값을 강제해야합니다.

for(i=0;i<tds.length;i++){ 
    (function(){ 
    var _i = i; 
    tds[i].onclick = function(){ 
     alert(_i); 
    }; 
    })(); 
} 

그렇지 않으면, i의 값이 항상 마지막 인덱스가됩니다

[자바 스크립트 폐쇄 작동합니까?]의 (