Codrops JavaScript overlay, undefined不是一个函数错误

Codrops JavaScript overlay, undefined is not a function error

本文关键字：一个错误函数 overlay JavaScript undefined Codrops 更新时间：2023-09-26

我想使用tut表单Codrops为我的投资组合制作覆盖。当点击缩略图时，项目覆盖应该打开。这里是tut/markup/javascript: http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/(我使用示例7，'Content Push')

但问题是，'trigger-overlay'是一个id，而不是一个类，因为在tut的例子中只使用了一个按钮。我有多个缩略图，所以我改变了var triggerBttn从'getElementById'到'getElementsByClassName'

    (function() {
    var container = document.querySelector( 'div.pagewrapper' ),
        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.remove( container, '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' );
            classie.add( container, 'overlay-open' );
        }
    }
    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

代码依赖于class .js

但是现在我得到了错误

Uncaught TypeError: undefined is not a function

on line:

triggerBttn.addEventListener( 'click', toggleOverlay );

我在这里做错了什么?

我发现简单的问题是，他们没有定义"closeBttn"之后的变量的其余部分，这段代码块变量的其余部分。

错

closeBttn = overlay.querySelector( 'button.overlay-close' );

应该是

closeBttn = overlay.querySelector( 'button.overlay-close' ),

所以最后的代码是

var triggerBttn = document.getElementById( 'trigger-navbar' ),
        navbar = document.querySelector( 'section.navbar' ),
        closeBttn = navbar.querySelector( 'a.navbar-close' ),
        navClick = navbar.querySelector( 'section.navbar nav ul li a' ),
        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( navbar, 'open' ) ) {
            classie.remove( navbar, 'open' );
            classie.add( navbar, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( navbar, 'close' );
            };
            if( support.transitions ) {
                navbar.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( navbar, 'close' ) ) {
            classie.add( navbar, 'open' );
        }
    }