0

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

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

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

我试过这样做，但我想我错过了一些东西。如果我使用数组索引而不是iinalert()它工作正常。但是没有匹配。我被困在只有一个 obj 上。我如何才能将loop'i不仅传递给页面链接，还传递给我的函数。

小提琴

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

4

2 回答 2

1

更新的演示

尝试添加一个闭包，以存储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-25T18:47:50.417 回答
0

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

像这样：

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

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

Function.bind : Bindthis第一个参数是在按指定顺序调用函数时传入的所有其他参数 的范围。

于 2013-06-25T18:49:08.680 回答