2016-04-01 13 views
-7

jsファイルの最初のセレクタから '$ is undefined'というエラーが表示されます。 JQueryリファレンスをローカルファイルまたはGoogle CDNとして追加しました。また、私はそれをHTMLファイルの先頭と末尾に入れようとしました.JQueryが正しくロードされているかどうかを確認するために、コンソールのネットワーク部分もチェックしてください。しかし、$を認識しないようです。また、JSファイル全体を$(document).ready(function())に入れようとしました この関数は正しく動作しますが、まだエラーが発生しています。 私はさまざまなブラウザと異なるシステムでそれを試みました。

$(document).ready(function() { 
 
\t var currentIndex = 0; 
 
\t var itemAmt; 
 
    
 

 
\t function cycleItems() { 
 
\t \t var item = $('.imageContainer div').eq(currentIndex); 
 
\t \t $('.imageContainer div').hide(); 
 
\t \t item.css('display', 'inline-block'); 
 
\t } 
 

 
\t var autoSlide = setInterval(function() { 
 
\t \t currentIndex += 1; 
 
\t \t if (currentIndex > $('.imageContainer div').length - 1) { 
 
\t \t \t currentIndex = 0; 
 
\t \t } 
 
\t \t cycleItems(); 
 
\t }, 3000); 
 

 
\t $('.next').click(function() { 
 
\t \t clearInterval(autoSlide); 
 
\t \t currentIndex += 1; 
 
\t \t if (currentIndex > $('.imageContainer div').length - 1) { 
 
\t \t \t currentIndex = 0; 
 
\t \t } 
 
\t \t cycleItems(); 
 
\t }); 
 

 
\t $('.prev').click(function() { 
 
\t \t clearInterval(autoSlide); 
 
\t \t currentIndex -= 1; 
 
\t \t if (currentIndex < 0) { 
 
\t \t \t currentIndex = $('.imageContainer div').length - 1; 
 
\t \t } 
 
\t \t cycleItems(); 
 
\t }); 
 
});
.imageContainer { 
 
    max-width: 400px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.imageContainer div { 
 
    background-color: white; 
 
    width: 100%; 
 
    display: inline-block; 
 
    display: none; 
 
} 
 
.imageContainer img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.next { 
 
    right: 5px; 
 
    position: absolute; 
 
} 
 

 
.prev { 
 
    left: 5px; 
 
    position: absolute; 
 
}
<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link href="HomeStyle.css" rel="stylesheet" type="text/css"> 
 
    <script type="text/javascript" src="../HomePage/Slider.js"></script> 
 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> 
 
    <script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery-latest.js"></script> 
 
    <title>Home!</title> 
 
</head> 
 
<body> 
 
    <div id="gallery"> 
 
      <section class="slider"> 
 
       <button class="next">Next</button> 
 
       <button class="prev">Previous</button> 
 
       <div class="imageContainer"> 
 
        <div style="display: inline-block;"> 
 
         <img src="http://placeimg.com/400/200/people" /> 
 
        </div> 
 
        <div> 
 
         <img src="http://placeimg.com/400/200/animals" /> 
 
        </div> 
 
        <div> 
 
         <img src="http://placeimg.com/400/200/people" /> 
 
        </div> 
 
        <div> 
 
         <img src="http://placeimg.com/400/200/tech" /> 
 
        </div> 
 
       </div> 
 
      </section> 
 
     </div> 
 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> 
 
    <script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="../HomePage/jquery-latest.js"></script> 
 
    </body> 
 
</html>

は、どのように私はそれが自由なエラーを作業することができますか?

+0

はエラーなしで動作します –

+3

jQueryを何回含むのですか? 1で十分です;) – A1rPun

+3

あなたは真剣にjQueryを8回追加しようとしていますか? –

答えて

0

jqueryが...それに応じて、他のすべてのスクリプトの前に

を含めるべきである私は、これは$ is undefinedエラーの原因問題であると仮定し...

+0

Yess!出来た :) – Adi

1

あなたは一度だけjQueryライブラリを追加する必要があります。あなたのjqueryのコードは$(document).ready(function(){})の内部にあるので、あなたは彼らが追加された順に(多分あなたのslider.jsはありません)あなたのhtmlコードではなく、任意のライブラリの使用jqueryの前にどこか

2

JavaScriptファイルのロードを追加することができますすることができますページ。あなたが追加した最初のjavascriptファイルは../Homepage/slider.jsです。私はそれが何をしてもjQueryを使っていると推測しています。これは、ある時点で$を参照していることを意味します。しかし、待つ:jQueryはまだロードされていない!ブラウザはjQueryのダウンロードを既に開始している可能性がありますが、先行するスクリプトが終了するまで実行されない可能性があるため、このエラーが発生します。

jQueryを一番上に移動すると(一番上に4回、一番下に4回ではなく1回だけ必要です)、問題が解決するはずです。

さらに、スクリプト宣言のすべてをページの下部に移動します。つまり、ページの残りの部分をレンダリングからブロックしないようにします。

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     ... 
    </head> 
    <body> 
     ... 
     <script type="text/javascript" src="../HomePage/jquery.min.js"></script> 
     <script type="text/javascript" src="../HomePage/Slider.js"></script> 
    </body> 
</html> 

また、スクリプトのロード順序を保証するためにrequireJSのようなものを使用することができますが、それはよくあなたがここでやっているものの範囲を超えて、高度なトピックです。

関連する問題