【问题标题】:code stopped working after migrating from codepen从 codepen 迁移后代码停止工作
【发布时间】:2015-10-12 03:03:39
【问题描述】:

所以,这是有史以来最奇怪的事情。我正在做一个关于 codepen 的项目(当然在 codepen 中要容易得多)。

如何从 codepen 迁移?好吧,您几乎只需添加基本的 html 标签和链接,以便您可以在 css 和 js 之间进行通信。

但尽管我做的所有这些都正确(还添加了所需的库),但我的代码无法正常工作。

我的代码应该做什么: - 允许用户拖动窗口

但事实并非如此!

更重要的是,所有的 Jquery 和 Jquery UI 功能都无法正常工作。在查看控制台时,发现如下错误"ReferenceError: $ is not defined"

好的,现在我使用的代码在这里:http://codepen.io/julian-a-avar/pen/xbaRJz

正如预期的那样,除了 HTML 文件之外,一切都一样:

<!doctype html>
<html>
    <head>
        <!-- INFO -->
        <meta charset="UTF-8">
        <meta name="application-name" content="Orion OS">
        <meta name="author" content="Julian Avar Campopiano">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <!-- CSS -->
        <link rel="stylesheet" href="main.css" type="text/css">

        <!-- JS -->
        <script src="script.js"></script>

        <!-- Libraries -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    </head>
    <body>
        <div id="taskbar">
            <div id="start_menu"></div>
            <div id="menu">
                <div class="app app1">W1</div>
                <div class="app app2">W2</div>
            </div>
        </div>

        <div class="window w1">
            <div class="head">
                <div class="title">Window 1</div>
                <div class="buttons">
                    <div class="close"></div>
                    <div class="maximize"></div>
                    <div class="minimize"></div>
                </div>
            </div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                </p>
            </div>
        </div>

        <div class="window w2">
            <div class="head">
                <div class="title">Window 2</div>
                <div class="buttons">
                    <div class="close"></div>
                    <div class="maximize"></div>
                    <div class="minimize"></div>
                </div>
            </div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                </p>
            </div>
        </div>
    </body>
</html>

是的,文件名是正确的,我使用的是 C9.io

请帮忙,也许我错过了什么。

【问题讨论】:

    标签: html


    【解决方案1】:

    ReferenceError: $ 未定义

    我认为它发生在您实现拖放功能的 script.js 中。

    因此修复脚本的顺序可能会解决问题。

    <head>
        <!-- INFO -->
        <meta charset="UTF-8">
        <meta name="application-name" content="Orion OS">
        <meta name="author" content="Julian Avar Campopiano">
        <meta name="description" content="">
        <meta name="keywords" content="">
    
        <!-- CSS -->
        <link rel="stylesheet" href="main.css" type="text/css">
    
        <!-- Libraries -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    
        <!-- JS -->
        <script src="script.js"></script>
    </head>
    

    【讨论】:

      【解决方案2】:

      你在 jQuery 之前包含了你的脚本,所以 $ 不存在。

      订单很重要。

      【讨论】:

        【解决方案3】:

        您应该在加载 jquery 库后添加脚本。

        在文件末尾、&lt;/body&gt; 之前加载脚本也是一个好习惯。

            <!doctype html>
        <html>
            <head>
                <!-- INFO -->
                <meta charset="UTF-8">
                <meta name="application-name" content="Orion OS">
                <meta name="author" content="Julian Avar Campopiano">
                <meta name="description" content="">
                <meta name="keywords" content="">
        
                <!-- CSS -->
                <link rel="stylesheet" href="main.css" type="text/css">
        
                <!-- JS -->
                <script src="script.js"></script>
        
                <!-- Libraries -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
            </head>
            <body>
                <div id="taskbar">
                    <div id="start_menu"></div>
                    <div id="menu">
                        <div class="app app1">W1</div>
                        <div class="app app2">W2</div>
                    </div>
                </div>
        
                <div class="window w1">
                    <div class="head">
                        <div class="title">Window 1</div>
                        <div class="buttons">
                            <div class="close"></div>
                            <div class="maximize"></div>
                            <div class="minimize"></div>
                        </div>
                    </div>
                    <div class="content">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                        </p>
                    </div>
                </div>
        
                <div class="window w2">
                    <div class="head">
                        <div class="title">Window 2</div>
                        <div class="buttons">
                            <div class="close"></div>
                            <div class="maximize"></div>
                            <div class="minimize"></div>
                        </div>
                    </div>
                    <div class="content">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                        </p>
                    </div>
                </div>
        
                <!-- Libraries -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
        
                <!-- JS -->
                <script src="script.js"></script>
        
            </body>
        </html>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2019-08-26
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多