試圖通過'getElementsByClassName'類循環遍歷

Question

我試圖在我的Javascript中使用getElementsByClassName。我知道我需要使用一個循環才能工作，但我不知道如何。我只需要將它用於'showLeft'類。所有其他人可以保持原樣。這裏是我的JS：

var menuLeft = document.getElementById('cbp-spmenu-s1'), 
     menuRight = document.getElementById('cbp-spmenu-s2'), 
     menuTop = document.getElementById('cbp-spmenu-s3'), 
     menuBottom = document.getElementById('cbp-spmenu-s4'), 

     showLeft = document.getElementsByClassName('showLeft'), 

     showRight = document.getElementById('showRight'), 
     showTop = document.getElementById('showTop'), 
     showBottom = document.getElementById('showBottom'), 
     showLeftPush = document.getElementById('showLeftPush'), 
     showRightPush = document.getElementById('showRightPush'), 
     body = document.body; 

showLeft.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuLeft, 'cbp-spmenu-open'); 
    disableOther('showLeft'); 
}; 
showRight.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuRight, 'cbp-spmenu-open'); 
    disableOther('showRight'); 
}; 
showTop.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuTop, 'cbp-spmenu-open'); 
    disableOther('showTop'); 
}; 
showBottom.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuBottom, 'cbp-spmenu-open'); 
    disableOther('showBottom'); 
}; 
showLeftPush.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(body, 'cbp-spmenu-push-toright'); 
    classie.toggle(menuLeft, 'cbp-spmenu-open'); 
    disableOther('showLeftPush'); 
}; 
showRightPush.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(body, 'cbp-spmenu-push-toleft'); 
    classie.toggle(menuRight, 'cbp-spmenu-open'); 
    disableOther('showRightPush'); 
}; 

function disableOther(button) { 
    if(button !== 'showLeft') { 
     classie.toggle(showLeft, 'disabled'); 
    } 
    if(button !== 'showRight') { 
     classie.toggle(showRight, 'disabled'); 
    } 
    if(button !== 'showTop') { 
     classie.toggle(showTop, 'disabled'); 
    } 
    if(button !== 'showBottom') { 
     classie.toggle(showBottom, 'disabled'); 
    } 
    if(button !== 'showLeftPush') { 
     classie.toggle(showLeftPush, 'disabled'); 
    } 
    if(button !== 'showRightPush') { 
     classie.toggle(showRightPush, 'disabled'); 
    } 
} 

非常感謝。

另一個問題： 雖然我在這裏，我想我不妨問我有一個其他問題。

此代碼適用於我設置爲出現在屏幕右側的畫布外導航菜單。我正在使用'menuRight'菜單和'moveLeft'按鈕。一切都很好，除非我想讓導航菜單在用戶點擊頁面正文時消失。我怎樣才能做到這一點？

Answer 1

你可以這樣做：

var a=document.getElementsByClassName('menuRight'); 
for(var i=0;i<a.length;i++) 
{ 
    //do stuff. to access the elements use a[i] 
} 

Answer 2

如果所有「showLeft」元素是相同的父元素中添加父元素上單擊處理，並檢查currentTarget屬性。

否則，您可能需要遍歷從getElementsByClassName返回的列表中的每個元素，但這有點不合適。

你可以在這裏閱讀更多：http://www.kirupa.com/html5/handling_events_for_many_elements.htm