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

尝试使用＆＃39; getElementsByClassName＆＃39;循环遍历类列表。

2 个答案: