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

时间:2016-11-20 21:41:40

标签: javascript jquery html

我编写了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>

3 个答案:

答案 0 :(得分:2)

你在功能

后缺少括号
$(document).ready(function(){
    $("#content").hide();
});

答案 1 :(得分:1)

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

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

而且,这里是整个片段:

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

Demo

答案 2 :(得分:-1)

正确的语法是:

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