试图通过'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