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

回答

相关问题