包括从外部文件到HTML的查询功能(使用Dropbox进行本地测试）

Including query function to HTML from external file (using Dropbox to test locally)

本文关键字：Dropbox 测试 使用 文件 从外部 HTML 查询功能 包括      更新时间：2024-06-01

我正试图通过外部文件添加一些简单的jQuery。我希望代码保留在外部.js文件中。我使用Dropbox，这样我就可以在本地测试我的网站，我几乎可以肯定JavaScript可以通过这种方法工作，但我不知道jQuery库。我似乎无法通过反复试验得到任何反馈。这是我尝试的代码的简单形式。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel='stylesheet' type='text/css' href='style.css'/>
        <script type="text/javascript" src="functions.js" ></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    </head>
<body>
<div id='container'>
     <div class='menu'>
         <h2>Title of menu/h2>
     </div>
     <div class='panel'>
         <p>
            Some text here
         </p>
     </div>
</div>
</body

到目前为止，这是整个.js文件。这是否需要定义为一个函数，然后添加到HTML中？这是范围问题吗？

$(document).ready(function(){
    $('.menu').click(function(){
        $('.panel').slideToggle('slow')
    })
})

在文件使用的库之前加载文件。更改两行<script>，以便首先加载jQuery：

更改

    <script type="text/javascript" src="functions.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

至

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="functions.js" ></script>

您需要在包含jQuery之后添加代码。。

所以交换这些线路

    <script type="text/javascript" src="functions.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

至

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="functions.js" ></script>

这是因为您的代码使用jQuery，所以在使用$之前需要加载jQuery。

相关文章：