Question

我编写了html / css代码，然后添加了另一个文件来包含jquery库和我自己的js代码（在文件scripts.js中）。

如果我将代码保存在单独的scripts.js文件中，则代码无法正常工作，但如果我将其应用于<scripts></script>中的index.html元素，则该代码无效。

为什么会这样，我该如何解决这个问题？

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Hartmeting</title>
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css">
    <script src="js/jquery-3.1.1.js" type='text/javascript'></script>
    <script src="js/scripts.js" type='text/javascript'></script>
</head>
<body>
    <div id="wrapper">
        <header id="titel">
            <h1>Welcome</h1>
        </header>
        <!-- Menu -->
        <nav id="menu">
            <ul>
                <li><a href="#intro"> Introductie </a></li>
            </ul>
        </nav>
        <!-- Manual -->
        <div id="content">
            <!-- Intro Slide -->
            <article id="intro">
                <h2>Introductie</h2>
                <figure>
                    <img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
                </figure>
                <p>Zonder moeite je hart meten? Dat kan...</p>
            </article>

            <!-- Slide 1 -->
            <article id="probleem">
                <h2>Het Probleem</h2>
                <figure>
                <img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
                </figure>
                <p>Het probleem uitleggen</p>
            </article>
        </div>
        <footer>
            <a href="#wrapper"> To the top! </a>
        </footer>
    </div>
</body>
</html>

浏览器控制台日志：

SyntaxError：意外的令牌＆＃39;）＆＃39;。预计开幕式（＆＃39;之前）   函数的参数列表。

但它确实有效，如果我这样做：

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Hartmeting</title>
        <link rel="stylesheet" href="css/stylesheet.css" type="text/css">
        <script src="js/jquery-3.1.1.js" type='text/javascript'></script>
        <script type='text/javascript'>
            $( document ).ready(function() {
                $('content').hide();
            });
        </script>
    </head>       
    <body>
        <div id="wrapper">
            <header id="titel">
                <h1>Welcome</h1>
            </header>

            <!-- Menu -->
            <nav id="menu">
                <ul>
                    <li><a href="#intro"> Introductie </a></li>
                </ul>
            </nav>

            <!-- Manual -->
            <div id="content">
                <!-- Intro Slide -->
                <article id="intro">
                    <h2>Introductie</h2>
                    <figure>
                        <img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
                    </figure>
                    <p>Zonder moeite je hart meten? Dat kan...</p>
                </article>

                <!-- Slide 1 -->
                <article id="probleem">
                    <h2>Het Probleem</h2>
                    <figure>
                        <img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
                    </figure>
                    <p>Het probleem uitleggen</p>
                </article>
            </div>
            <footer>
                <a href="#wrapper"> To the top! </a>
            </footer>
        </div>
    </body>
    </html>

Answer 1

你在功能

后缺少括号

$(document).ready(function(){
    $("#content").hide();
});

Answer 2

你的语法似乎是正确的（好吧，是的，你已经解决了这个问题）。然而你的jQuery选择器是错误的。为了通过它的id隐藏html元素，你需要#前缀。话虽这么说，你的.hide()应该是这样的：

  $('#content').hide();

而且，这里是整个片段：

$(document).ready(function() {
  $('#content').hide();
});

Demo

Answer 3

正确的语法是：

$(document).ready(function(){ 
    $("#content").hide();
});

如果包含为.js文件，我的jquery代码将无法工作？

3 个答案: