JS數組匹配

我在頁面中有幾個鏈接，我想爲每個鏈接添加一個函數。我已經完成了一個循環。我有一個對象數組。我想將對象值傳遞給我分配給鏈接的函數。所以我想匹配鏈接數組與我的對象數組。JS數組匹配

HTML

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

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); 
}

我試圖這樣做，但我覺得我失去了一些東西。如果我使用數組索引而不是i在alert()它工作正常。但沒有匹配。我被一個obj卡住了。我怎麼能通過loop的i不只是頁面鏈接，而且我的功能。

fiddle

編輯：我想我應該提到，我是新來的JS。我甚至不知道JS的封閉手段。同樣適用於綁定...而不是告訴我該怎麼做/使用你可能只是告訴我如何解決我目前的問題，並鏈接演示可能？由於我是JS新手（不知道所有這些術語），很難在其他人的代碼中獲得邏輯。無論如何。我現在有一個答案。謝謝。

來源

2013-06-25 akinuri

還有一個被封閉咬傷的案例。 – Jon

這不是問題，但是在創建數組時不需要'obj1 ='位。你只是簡單地創建一個名爲'obj1'的全局變量，這似乎不是你的意圖。 –

你意識到'.attachEvent（）'僅僅是IE，'false'參數什麼也不做？ –

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); 
}

來源

2013-06-25 18:47:50

仍然不起作用。 '不能訪問未定義的屬性「（myArray [」[object event]「]）':-) – Bergi

@Bergi：你還看到這個[更新演示]的任何問題（http://jsfiddle.net/Matt_Coughlin/TwSAN/1 /）？它在Firefox和Chrome中測試得很好（從我能說的）。 –

+1馬特首先到達那裏。關閉仍然擁有我。另一方面，我可以建議使用'for（var in pageLinks）{...}'來獲得更簡潔的代碼嗎？除非一些茶袋有不良習慣的理由？ – shennan

您可以使用bind

像這樣當前索引通路：

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的範圍，當以指定的順序調用該函數時，所有其他參數都被傳入。

來源

2013-06-25 18:49:08 JasonM

回答

相關問題