javascript - getElementsByClassName 不适用于叠加

Question

我正在尝试在按钮单击时切换“覆盖”。在同一个类下添加这两个按钮并调用此函数后，JS 根本无法完成它。我不确定问题出在哪里:

document.getElementsByClassName( 'trigger-overlay' )

或者其他地方？

如果我将其保留为 document.getElementById( 'trigger-overlay' ) 并在 html 中切换到 id 而不是 class，它仅适用于一个元素。

有点卡在这里。

<p><button class="trigger-overlay" type="button">Open Overlay</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay2</button></p>

和js函数:

    (function() {
    var triggerBttn = document.getElementsByClassName( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

Answer 1

triggerBttn 是一个数组。在这里你需要像数组一样使用它......如下所示

var triggerBttn = document.getElementsByClassName( 'trigger-overlay' ),


for(var i=0; i < triggerBttn.length ; i++)
{
  triggerBttn[i].addEventListener( 'click', toggleOverlay );
}