JS 배열 일치

Question

페이지에 링크가 거의없고 각 링크에 기능을 추가하고 싶습니다. 나는 그것을 반복했다.

이제 개체 배열을 얻었습니다. 개체 값을 함수에 전달하여 링크에 할당하려고합니다. 그래서 링크 배열을 내 객체 배열과 일치시키고 싶습니다.

HTML

<a href="#">link1</a> 
<a href="#">link2</a> 
<a href="#">link3</a> 

JS

var myArray = [ 
    obj1 = {property: "value1"}, 
    obj2 = {property: "value2"}, 
    obj3 = {property: "value3"} 
]; 

var pageLinks = document.getElementsByTagName("a"); 

for (i = 0, len = pageLinks.length; i < len; i++){ 
    pageLinks[i].attachEvent("onclick", function(i){ 
     alert(myArray[i].property); 
    }, false); 
} 

나는이 일을 시도하지만 난 뭔가를 놓친 것 같아. alert()에 i 대신 배열 색인을 사용하면 정상적으로 작동합니다. 그러나 일치하는 것이 없습니다. 나는 하나의 obj로 붙어있다. loop의 i은 페이지 링크뿐만 아니라 내 기능에 어떻게 전달할 수 있습니까?

fiddle

편집 : 난 내가 JS에 새로운 해요 언급 했어야 같아요. 나는 JS에서 클로저가 어떤 의미인지 모른다. 바인드에 대해서도 마찬가지입니다 ... 무엇을 해야할지/사용하는 대신 내 현재 문제를 해결하고 데모를 연결하는 방법을 보여줄 수 있습니까? JS에 익숙하지 않기 때문에 (이 모든 용어를 모르는 경우) 누군가 다른 사람의 코드에서 논리를 얻는 것이 다소 어렵습니다. 어쨌든. 나는 지금 대답을 가지고있다. 감사.

Answer 1

Updated Demo

봅니다 각 반복에 대한 i의 값을 저장하기 위해, 클로저를 추가 :

var myArray = [ 
    {property: "value1"}, 
    {property: "value2"}, 
    {property: "value3"} 
]; 

var pageLinks = document.getElementsByTagName("a"); 

for (i = 0, len = pageLinks.length; i < len; i++){ 

    // This closure allows the value of "i" to be used 
    // when the event handler is fired. 
    (function(i){ 

     pageLinks[i].addEventListener("click", function(){ 
      alert(myArray[i].property); 
     }, false); 

    })(i); 
} 

당신은 사용하여 현재 인덱스과 같이 bind

에 전달할 수 있습니다

Answer 2

:

for (i = 0, len = pageLinks.length; i < len; i++){ 
    pageLinks[i].addEventListener("click", function(ind){ 
    alert(myArray[ind].property); 
    }.bind(this,i), false); 
} 

이 문제는 scop 폐쇄 및 폐쇄.

Function.bind : Bind 첫 번째 인수는 this의 범위이며, 다른 모든 인수는 함수가 지정된 순서대로 호출 될 때 전달됩니다.