尝试使用"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