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

我试过这样做，但我想我错过了什么。如果我在i中使用数组索引而不是alert()，则可以正常工作。但是没有匹配。我只坚持一个obj。如何将loop的{{1}}传递给网页链接，还传递给我的功能。

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

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

此问题与范围和闭包有关。

Function.bind：Bind 第一个参数是this的范围，当按指定的顺序调用函数时，所有其他参数都被传入。

JS数组匹配

2 个答案: