为什么JavaScript代码无法在codepen.io中工作

Question

因此，有一些来自codepen.io的代码http://codepen.io/karolpodlesny/pen/npKqu 。 它在此处上传： http : //fredricarms.com/javatestindex.html 。

现在，用于制作包装盒的HTML，CSS和JavaScript可以扩展并完成所有很酷的事情，它们应该工作在单独的文件中，而Modernizr也是如此。 我也知道正在调用js，因为在boxlayout.js中，我编写了一些代码来调出警告框，并且效果很好。 因此，我猜想Codepen会修复代码，使其完美运行。 我只是不知道在我的服务器上无法使用的boxlayout.js中的代码出了什么问题。 请帮助，非常感谢。 以下是boxlayout js文件中的代码。

var Boxlayout = (function() {
    var $el = $( '#bl-main' ),
        $sections = $el.children( 'section' ),
        // works section
        $sectionWork = $( '#bl-work-section' ),
        // work items
        $workItems = $( '#bl-work-items > li' ),
        // work panels
        $workPanelsContainer = $( '#bl-panel-work-items' ),
        $workPanels = $workPanelsContainer.children( 'div' ),
        totalWorkPanels = $workPanels.length,
        // navigating the work panels
        $nextWorkItem = $workPanelsContainer.find( 'nav > span.bl-next-work' ),
        // if currently navigating the work items
        isAnimating = false,
        // close work panel trigger
        $closeWorkItem = $workPanelsContainer.find( 'nav > span.bl-icon-close' ),
        transEndEventNames = {
            'WebkitTransition' : 'webkitTransitionEnd',
            'MozTransition' : 'transitionend',
            'OTransition' : 'oTransitionEnd',
            'msTransition' : 'MSTransitionEnd',
            'transition' : 'transitionend'
        },
        // transition end event name
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        // support css transitions
        supportTransitions = Modernizr.csstransitions;

    function init() {
        initEvents();
    }

    function initEvents() {

        $sections.each( function() {

            var $section = $( this );

            // expand the clicked section and scale down the others
            $section.on( 'click', function() {

                if( !$section.data( 'open' ) ) {
                    $section.data( 'open', true ).addClass( 'bl-expand bl-expand-top' );
                    $el.addClass( 'bl-expand-item' );   
                }

            } ).find( 'span.bl-icon-close' ).on( 'click', function() {

                // close the expanded section and scale up the others
                $section.data( 'open', false ).removeClass( 'bl-expand' ).on( transEndEventName, function( event ) {
                    if( !$( event.target ).is( 'section' ) ) return false;
                    $( this ).off( transEndEventName ).removeClass( 'bl-expand-top' );
                } );

                if( !supportTransitions ) {
                    $section.removeClass( 'bl-expand-top' );
                }

                $el.removeClass( 'bl-expand-item' );

                return false;

            } );

        } );

        // clicking on a work item: the current section scales down and the respective work panel slides up
        $workItems.on( 'click', function( event ) {

            // scale down main section
            $sectionWork.addClass( 'bl-scale-down' );

            // show panel for this work item
            $workPanelsContainer.addClass( 'bl-panel-items-show' );

            var $panel = $workPanelsContainer.find("[data-panel='" + $( this ).data( 'panel' ) + "']");
            currentWorkPanel = $panel.index();
            $panel.addClass( 'bl-show-work' );

            return false;

        } );

        // navigating the work items: current work panel scales down and the next work panel slides up
        $nextWorkItem.on( 'click', function( event ) {

            if( isAnimating ) {
                return false;
            }
            isAnimating = true;

            var $currentPanel = $workPanels.eq( currentWorkPanel );
            currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
            var $nextPanel = $workPanels.eq( currentWorkPanel );

            $currentPanel.removeClass( 'bl-show-work' ).addClass( 'bl-hide-current-work' ).on( transEndEventName, function( event ) {
                if( !$( event.target ).is( 'div' ) ) return false;
                $( this ).off( transEndEventName ).removeClass( 'bl-hide-current-work' );
                isAnimating = false;
            } );

            if( !supportTransitions ) {
                $currentPanel.removeClass( 'bl-hide-current-work' );
                isAnimating = false;
            }

            $nextPanel.addClass( 'bl-show-work' );

            return false;

        } );

        // clicking the work panels close button: the current work panel slides down and the section scales up again
        $closeWorkItem.on( 'click', function( event ) {

            // scale up main section
            $sectionWork.removeClass( 'bl-scale-down' );
            $workPanelsContainer.removeClass( 'bl-panel-items-show' );
            $workPanels.eq( currentWorkPanel ).removeClass( 'bl-show-work' );

            return false;

        } );

    }

    return { init : init };
})();

Answer 1

您的代码完全依赖jQuery，但是您尚未在现场站点中包含jQuery。 在您的CodePen示例中，您使用的是jQuery 1.9.1：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

您可以继续使用Google托管的版本，或者如果您想自己托管它，则可以从jQuery自己的网站下载jQuery。

Answer 2

问题在于，文档加载完成后，您需要初始化BoxLayout（由于尚未渲染等效的dom元素，因此不会定义您正在库中使用的所有jQuery变量），这就是为什么需要初始化dom准备就绪时的一切。

将以下代码行添加到boxlayout.js文件的底部：

$(document).ready(function() {
    Boxlayout.init();
});

仅出于测试目的，在您的网站上打开Web开发人员控制台，然后运行以下js代码：

Boxlayout.init();

您会看到一切正常。