javascript - 为什么 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's own website 下载 jQuery。 .