JS数组匹配[重复]答案

【问题标题】：JS array matching [duplicate]JS数组匹配[重复]
【发布时间】：2013-06-22 16:58:41
【问题描述】：

我的页面中的链接很少，我想为每个链接添加一个功能。我已经用循环完成了。

现在，我得到了一个对象数组。我想将对象值传递给我分配给链接的函数。所以我想将链接数组与我的对象数组匹配。

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

我尝试过这样做，但我认为我遗漏了一些东西。如果我在alert() 中使用数组索引而不是i，它工作正常。但是没有匹配。我被困在只有一个 obj 上。如何将loop 的i 传递给页面链接以及我的函数。

fiddle

编辑：我想我应该提到我是 JS 新手。我什至不知道 JS 中的闭包是什么意思。绑定也是如此...与其告诉我要做什么/使用什么，不如告诉我如何解决我当前的问题并链接一个演示？由于我是 JS 新手（不知道所有这些术语），因此很难在其他人的代码中获取逻辑。反正。我现在有答案了。谢谢。

【问题讨论】：

又一例被封口咬伤。
这不是问题，但在创建阵列时不需要obj1 = 位。您只是在创建一个名为 obj1 的全局变量，这似乎不是您的意图。
您意识到.attachEvent() 只是IE，而, false 参数什么都不做？
@CrazyTrain 见编辑。而且我知道。我正在使用 IE。 HTA 是具体的。这不是一个真正的问题。

标签： javascript arrays function loops object

【解决方案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);
}

【讨论】：

还是不行。 Cannot access property "property" of undefined (myArray["[object Event]"]) :-)
@Bergi：你还看到这个updated demo 有什么问题吗？它在 Firefox 和 Chrome 中测试良好（据我所知）。
+1 给马特，让他先到达那里。闭包仍然拥有我。另一方面，我可以建议使用for(var in pageLinks){ ... } 来获得更简洁的代码吗？除非某些茶包有不当行为的原因？
@shennan：在数组上这是一个不好的做法。请先了解基础知识，然后再进行抢占式名称调用。

【解决方案2】：

你可以使用bind传入当前索引

像这样：

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

这个问题与范围和闭包有关。

函数绑定：Bind 第一个参数是this 的作用域，所有其他参数在按指定顺序调用函数时传入。

【讨论】：