jQuery, 호버 메소드 및 클로저

Question

잠깐 동안 자바 스크립트 클로저로 고생해서 함수 스코프 주위에서 두뇌를 감싸려고했지만 대신 내 주변을 감싸고 있다고 생각합니다. 나는 많은 게시물을 보았습니다. (Nyman이 가장 도움이되었습니다.) 그러나 분명히 여전히 그것을 얻지 못합니다. jQuery에서 호버 메서드를 통해 루프를 실행하려고합니다. 호버 기능을 궁극적으로 한 번 이상 하나의 작업을 트리거 할 필요가 있지만 각각 단일 이미지 스왑으로 작업하게해야합니다.

$(document).ready(function() { 

    imageSource = []; 
    imageSource[0] = 'images/img0.png' //load 0 position with "empty" png 
    imgArea = []; 

    for (var i=1; i<11; i++) { 

     (function(){ //anonymous function for scope 

      imageSource[i] = 'images/img' + i + '.png'; 
      imgArea[i] = '#areamap_Img' + i; 

      // running console.log here gives expected values for both 

      $(imgArea[i]).hover( //imgArea[i] (selector) works correctly here 

       function() { 
        $('#imgSwap').attr('src',imageSource[i]); // imageSource[i] is undefined here 
       }, 
       function() { 
        $('#imgSwap').attr('src','images/img0.png'); 
       }); 

     })(); // end anonymous function and execute 

    }; // for loop 

}); 

다른 jQuery 게시물에서 범위 지정을 위해 익명의 함수를 사용하는 방법을 시도했습니다. OK로 작동하지만 첫 번째 호버 기능에서 배열 값에 대해 정의되지 않은 값을 던졌습니다. 하드 코딩 된 이미지 소스가 올바르게 작동하기 때문에 내부 함수이기 때문입니다.

Answer 1

클로저에 실제로 문제가 있으며, var i의 사용법과 관련이 있습니다. 익명 함수는 i의 로컬 버전이 없으므로 위의 함수 버전을 사용하고 있습니다. 그러나 나중에 i에 액세스하려고 시도하면 i == 11 (루프가 종료 된 것이므로). 이 문제를 해결하려면 다음과 같이 각각의 익명 함수에 i의 로컬 버전을 선언해야합니다

for (var i=1; i<11; i++) { 

    (function(){ //anonymous function for scope     
      var index = i; // The important part! 

      // It's not technically necessary to use 'index' here, but for good measure... 
      imageSource[index] = 'images/img' + index + '.png'; 
      imgArea[index] = '#areamap_Img' + index; 

      $(imgArea[index]).hover(

        function() { 
          $('#imgSwap').attr('src',imageSource[index]); // Here's where `index` is necesssary. 
        }, 
        function() { 
          $('#imgSwap').attr('src','images/img0.png'); 
        }); 

    })(); // end anonymous function and execute 

}; // for loop 

또한, 당신은 그냥 좋은 측정을 위해 해결해야 코드에서 작은 문제가있다. 로컬 변수에 올바르게 액세스하고 있지 않습니다.

var imageSource = []; 
var imageSource[0] = 'images/img0.png' //load 0 position with "empty" png 
var imgArea = [] 

"var"가 없으면 전역 변수를 선언하고 액세스 할 수 있습니다. (이것이 의도 한 행동이라면 사과드립니다.)