如果作爲.js文件包含，我的jquery代碼將無法工作？

我寫了html/css代碼，然後添加了另一個文件來包含jquery庫和我自己的js代碼（在文件scripts.js中）。如果作爲.js文件包含，我的jquery代碼將無法工作？

如果我將它保存在單獨的scripts.js文件中，但我的代碼不起作用，但如果將它應用於index.html中的<scripts></script>元素中，它將起作用。

這是爲什麼，我該如何解決這個問題？

我的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>

Browser Console Log:

SyntaxError: Unexpected token ')'. Expected an opening '(' before a function's parameter list.

但它確實工作，如果我不喜歡這樣寫道：

<!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>

來源

2016-11-20 user7186746

是你的JavaScript文件在您/ CSS的目錄？ –

'$（document）.ready（function）{'看起來像一個語法錯誤。如果你的代碼是如何編寫的，那麼這兩者都不應該工作 –

@PatrickEvans是的，控制檯說語法錯誤。（補充說我的故事）謝謝 – user7186746

你的語法似乎是正確的（好吧，是的，你已經修復，雖然）。然而你的jQuery選擇器是錯誤的。爲了通過它的id來隱藏html元素，你需要前綴#。話雖這麼說，你.hide()應該是這樣的：

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

而且也，這裏是整個片段：

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

Demo

來源

2016-11-20 21:57:52 Aer0

這是有效的，但奇怪的是，如果我添加：var article = $（'＃intro'）。first（）; $（article.first）.show（）;它不會工作。爲什麼是這樣？ – user7186746

你可以嘗試用'article.show（）;'代替。 – Aer0

它適合我。也許你的var聲明是錯誤的：https：//jsfiddle.net/ff9ua9tg/1/ – Aer0

-1

正確的語法是：

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

來源

2016-11-20 21:49:28 Reto

這有相同的語法錯誤 – charlietfl

你遺漏函數後的括號

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

來源

2016-11-20 21:52:53

它的工作原理，謝謝。 – user7186746

如果作爲.js文件包含，我的jquery代碼將無法工作？

回答

相關問題