循環設置內部HTML

我只能使用JavaScript來解決問題。我試圖寫一個for循環，但懸停時變得不確定。我基本上有一個動態生成的子菜單。當li在子菜單上懸停時，內部HTML將假設爲內容區域更改爲lis的右側。循環設置內部HTML

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

來源

2016-08-10 Ao C

問題是什麼？ – undefined

'sideCol'中有什麼？你可以使用'document.querySelectorAll'來緩解你的痛苦。 –

問題在於代碼不是DRY，sideCol是創建的div元素。 –

循環非常簡單，只需使用局部變量（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); 
}

來源

2016-08-10 21:29:08 Nosyara

我唯一的後續問題就是如果元素數量波動？所以如果我<5應該變成我<10等。有沒有一種方法來運行循環基於的數量？ –

我剛剛添加了計數行 - 解決它 – Nosyara

真棒，這個作品，並感謝 –

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

來源

2016-08-10 21:29:47 Barmar

這返回了一個錯誤，說forEach不是一個函數 –

對不起，忘了它不直接工作'NodeList'，你必須轉換它到一個數組或在編輯的答案中使用'.call'方法。 – Barmar

循環設置內部HTML

回答

相關問題