0

LI要素をクリックすると特定のdivが表示されるようにリストを作成しようとしています。ディクショナリから div の id とその他のプロパティを読み取りたい。したがって、辞書は次のようになります。

var ifSrc = {"welcome":"welcome.html",
          "proceduresAndComputers":"../proceduresAndComputers/index.html",
          "someId":"../someSourceFileForAnIFrame"}

およびそれらの LI 要素を形成する関数

function createMenu(){
    var listy = document.getElementById("sidebar");
    for(var key in ifSrc){
        var elem = document.createElement('li');
        elem.innerHTML = key;
        elem.className = "unselected";
        elem.addEventListener("click",function(){openDiv(this,key);},false);
        listy.appendChild(elem);
    }
    listy.firstElementChild.className="selected";
}

そのため、メニュー (LI 要素を含む UL) は問題ないように見えますが、どの LI をクリックしても、openDiv 関数は に正しい値を渡しますが、 にはthis同じ値を渡しますkey。key特に、ifSrc辞書の最後の値を渡します。ただし、各 elem ( に設定されているkey) の innerHTML は正常に表示されます。addEventListener のドキュメントを確認しましたが、あまり見つかりませんでした。

なぜこうなった？洞察はありますか？

4

1 に答える 1

0

正しいキー値をキャプチャしていることを確認してください (以下の例ではクロージャを使用)。現在の方法でkeyは、常にすべてのクリック イベントで同じ値を参照しています。これを行うことで、各クリック イベントの現在の値をコピーできます。key

    elem.addEventListener("click", (function(k) {
        return function() { 
            openDiv(this, k);
        }
    })(key), false);

デモ - jsfiddle.net

参考までに、こちらで説明されている「The Infamous Loop Problem」を参照してください。

于 2013-08-23T17:47:04.420 に答える