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

これをやってみましたが、何か足りないと思います。iinの代わりに配列インデックスを使用すると、正常にalert()動作します。しかし、一致するものはありません。私はたった1つのオブジェクトで立ち往生しています。をページ リンクだけでなく関数にも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 に答える