JavaScript for 루프가 너무 많이 반복됩니다.

Question

가능한 중복 :이
Javascript closure inside loops - simple practical example

누군가가 말해 줄 수 왜 'i'를 숫자 4 점이 코드 인쇄에서의 값? 루프는 3으로 만 이동하지만 menu_feedback div 안에 'i = 4'가 인쇄됩니다.

for(i=1; i<=3; i++){ 
    $('#file_button'+i).hover(function(){ 
     $('#menu_feedback').html('i = '+i+'<br/>'); 
    }, function(){ 
     $('#menu_feedback').html(''); 
    }); 
} 

. 폐쇄의 세계에

<button type="button" id="file_button1">Door 1</button> 
<button type="button" id="file_button2">Door 2</button> 
<button type="button" id="file_button3">Door 3</button> 

<div id="menu_feedback"></div> 

Answer 1

에 오신 것을 환영합니다.

사용이 :

for(i=1; i<=3; i++) { 
    (function(i) { 
     // the code that depends on i 
    })(i); 
} 

Answer 2

이것은 고전적인 자바 스크립트 문제입니다. hover 함수의 변수 i이 루프의 변수와 같기 때문입니다. 따라서 루프가 끝나면 i은 4이므로 함수에서 4가됩니다. 이 같은

시도 뭔가 :

var hoverFunc = function(i){ 
    return function(){ 
     $('#menu_feedback').html('i = '+i+'<br/>'); 
    }; 
}; 
for(i=1; i<=3; i++){ 
    $('#file_button'+i).hover(hoverFunc(i), function(){ 
     $('#menu_feedback').html(''); 
    }); 
} 

hoverFunc은 폐쇄이다. i 값을 "닫는"함수를 반환합니다.

Answer 3

직면 한 문제에 대한 자세한 내용은 JavaScript closure inside loops – simple practical example을 확인하십시오.

for(i=1; i<=3; i++){ 
    $('#file_button'+i).mouseenter({index: i}, function(event){ 
     $('#menu_feedback').html('i = '+ event.data.index + '<br/>'); 
    }).mouseleave(function(){ 
     $('#menu_feedback').html(''); 
    }); 
}