ルーピングスルー設定インナーHTML

Question

JavaScriptを使用するだけで問題を解決できます。私はforループを書こうとしましたが、ホバリング時には定義されていません。私は基本的に動的に生成されたサブメニューを持っています。サブメニューでliが表示されている場合、内側のHTMLはコンテンツエリアのlisの右側に表示されます。

sideCol.getElementsByTagName('li')[0].addEventListener('mouseover', function(){ 
    document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[0].children[1].innerHTML; 
}); 
sideCol.getElementsByTagName('li')[1].addEventListener('mouseover', function(){ 
    document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[1].children[1].innerHTML; 
}); 
sideCol.getElementsByTagName('li')[2].addEventListener('mouseover', function(){ 
    document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[2].children[1].innerHTML; 
}); 
sideCol.getElementsByTagName('li')[3].addEventListener('mouseover', function(){ 
    document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[3].children[1].innerHTML; 
}); 
sideCol.getElementsByTagName('li')[4].addEventListener('mouseover', function(){ 
    document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[4].children[1].innerHTML; 
}); 

Answer 1

ループは非常に簡単で、ローカル変数（ix）を使用してください。

var count = sideCol.getElementsByTagName('li').length; 
for(var i=0;i<count;i++) { 
    (function(ix) { 
     sideCol.getElementsByTagName('li')[ix] 
      .addEventListener('mouseover', function() { 
       document.getElementsByClassName('categoryExplorer-content')[0] 
        .children[2].innerHTML = 
       document.getElementsByClassName('categoryExplorer-content')[ix] 
        .children[1].innerHTML; 
     }); 
    })(i); 
} 

Answer 2

forEach()を使用して、要素をループし、イベントリスナーをバインドします。これは、あなたに適切な要素にアクセスするためにハンドラ関数で使用できるクロージャ変数としてインデックスを与えます。

[].forEach.call(sideCol.getElementsByTagName('li'), function(el, i) { 
    el.addEventListener('mouseover', function() { 
     var explorers = document.getElementsByClassName('categoryExplorer-content'); 
     explorers[0].children[2].innerHTML = explorers[i].children[1].innerHTML; 
    }); 
});