이 코드의 console.log가 정의되지 않은 이유는 무엇입니까?

Question

var el = $('.container'); 
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price'); 
for (var i = 0; i < anchors.length; i++) { 
    el.on('click', 'a[href$="#'+anchors[i]+'"]', function (e) { 
     e.preventDefault(); 
     console.log(anchors[i]); 
     $.scrollTo('a[name="'+anchors[i]+'"]'); 
    }); 
}; 

Answer 1

해당 요소를 클릭하면 i이 anchors.length 값으로 증가합니다.

클릭 핸들러에는 i에 대한 참조가 있습니다.

JavaScript에서 확인할 수없는 속성 조회는 undefined을 반환합니다.

요소에 대한 참조로 this을 사용하는 것이 훨씬 쉬울 것입니다. 그렇지 않으면 i 값을 직접 참조하는 것이 아니라 값으로 전달하는 방법을 찾으십시오.

Answer 2

i이 실제로 5과 같기 때문에 정의되지 않은 이유가 있습니다. 이것 좀보세요 : 그 루프가 완료

for (var i = 0; i < 5; i++) { 
    console.log(i); 
} 

이제 후 그것이 for 루프 현지해야하기 때문에 i가이 시점에서 정의되지 않은 것이라고 생각합니다. 불행하게도, 이것은 사실이 아닙니다. 이 테스트하는 간단한 방법 :

for (var i = 0; i < 5; i++) { 
    console.log(i); 
} 

console.log(i) // Logs out 5; 

간단히 말하면

, for 루프의 i++는 진실 시험의 일부 후에 i < 5 비트 실행됩니다. 따라서 i이 4과 같으면 루프가 실행되고 i++이 증가하여 i의 값을 5로 설정합니다. 그러면 진실 테스트가 실패합니다.

그래서 지금 당신이 i을 알고 당신이 당신의 anchors 배열의 조회를 수행 할 때, anchors[5]가 정의되지 5 같다.

때마다 클릭 이벤트가 발생, 그것은 5, 차례로, 당신은 항상

이 문제를 해결하려면, 우리가 만들 수 있습니다 정의되지 않은 기록합니다 i의 캐시 된 값을 실행하기 때문에이 중요한 이유는 그래서

var el = $('.container'); 
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price'); 

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

    // By passing the value to this self executing function, 
    // it creates a new instance of the variable 
    (function (index) { 
     el.on('click', 'a[href$="#'+anchors[index]+'"]', function (e) { 
     e.preventDefault(); 
      console.log(anchors[index]); 
      $.scrollTo('a[name="'+anchors[index]+'"]'); 
     }); 
    })(i); 

}; 

Answer 3

변수 i 같은 i의 값으로 별칭은 마지막 루프의 값을 얻었다. 당신이 앵커에 액세스하려면이를 사용할 수 있습니다

console.log($(this).attr('href').substr(1));