함수에서 루프 값을 사용하는 중 문제가 발생했습니다.

Question

초급 Javascript 질문은 여기에 있습니다.

주어진 div의 모든 링크를 찾고 각각에 대해 onclick 이벤트를 설정하는 함수를 만들려고합니다. 내가

#purpose

#이 링크를

IE : 나는 제대로 링크하는 HREF를 얻을 수 있습니다,하지만 난 온 클릭 함수를 사용하려고 할 때, 자바 스크립트는 발견 된 마지막 값을 사용하는 것 미래

#faq

나는 온 클릭 기능을 사용하는 경우, 모든 링크가 #faq 링크로보고됩니다. 당신이 closure 생성이

function prepareLinks() { 
var nav = document.getElementById('navigation'); 
var links = nav.getElementsByTagName ('a'); 
for (var i = 0; i<links.length; i++) { 
    var linkRef = links[i].getAttribute('href').split("#")[1]; 
    links[i].onclick = function() { 
     var popUp = "You clicked the " +linkRef +" link"; 
     alert (popUp); 
    } 
} 

} 여기

Answer 1

:

여기에 코드입니다. 외부 변수 linkRef는 내부 onclick 함수에 저장됩니다. 다음과 같이 시도하십시오.

clickFunction() { 
    var popUp = "You clicked the " + this.href.split("#")[1] +" link"; 
    // this should mean current clicked element 
    alert (popUp); 
} 

for (var i = 0; i<links.length; i++) { 
    links[i].onclick = clickFunction; 
} 

Answer 2

이것은 범위 지정 문제입니다. "click +"linkRef + "link"라는 표현은 onclick 이벤트가 발생했을 때 평가되지만,이 시점에서 linkRef의 값은 무엇입니까?

Answer 3

각 링크에 별도의 onClick 핸들러를 연결하려고하지만 실수로 동일한 링크를 연결하고 있습니다.

당신은 자세한 내용은 http://tadhg.com/wp/2006/12/12/using-new-function-in-javascript/를 참조

links[i].onclick = new Function("","alert('You clicked the '"+linkRef+"' link');"); 

으로 새로운 기능() 생성자를 사용하여 새 기능을 매번 생성 할 수 있습니다.

하지만 일반적으로 단일 처리기를 사용할 수 있는지 확인하는 것이 좋습니다. 이벤트 핸들러에 도달하면 "this"키워드가 이벤트의 생성자를 참조한다는 점이 흥미 롭습니다. 따라서 원래 코드는 this.getAttribute ("href")를 참조 할 수 있습니다. 너무 많은 핸들러는 자바 스크립트 이벤트 처리를 느리게 만듭니다.