web-dev-qa-db-ja.com

キャッチされていないReferenceError：$は定義されていません

JQueryイメージスライダーを作成しようとすると、このエラーメッセージが表示されます。

キャッチされていないReferenceError：$は定義されていません

ここに私の新しいコーディングがあります（スクリプトをページに移動したことに注意してください。これはAdobeによって提案されたものです）。

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}
</style>
</head>

<body bgcolor="#999999" text="#000000">

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <th height="132" align="left" scope="col">&nbsp;</th>
    <th scope="col"><div class="spacer" id="spacer"></div>
      <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
    <hr></th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</th>
    <td width="85%" align="left" valign="top" scope="col">
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>

    <div id="slideshowwrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=           "Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
        <div class="controller" id="next"></div>
      </div>
    </div></td>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});
</script>
</body>
</html>

WebサイトのJSフォルダーへのフォルダーパス（ローカル）は次のようになります：C：\ Users\Andrew\Desktop\GCFS\JS

コーディングの世界は初めてですが、私が達成しようとしていることは非常に簡単です。私が知っている限り、私は準備ができた関数を持つ必要はなく、javascriptは自動的に実行されるはずです。ご協力いただきありがとうございます！

コメントから

これを試したときも失敗しました

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
}); 
</script>
javascriptjqueryimagereferenceerror
8
MasterFuel

ソリューション：

1）Google CDNを使用してjQueryをロードする

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2）Cycle Pluginについて知っている限り、jQuery v1.5-v1.7と互換性があります。ほとんどのメソッドはjQuery 1.8+で非推奨になったためです。これが、ポイント1でv1.5のGoogle CDN jqueryを使用した理由です。サイクルプラグインの例のほとんどはjquery 1.5を使用しています。

3）ブラウザのキャッシュをクリアします。ほとんどの場合、それが主な原因です。

4）以下のコードを使用してjqueryのロードを確認してください

if(typeof jQuery!=='undefined'){
    console.log('jQuery Loaded');
}
else{
    console.log('not loaded yet');
}

主な編集：

エラーの理由はかなり単純です：

Jqueryがロードされる前に、cycleメソッドを呼び出しました。

dOMの呼び出しサイクルプラグインの準備ができました。

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });  
});
12
writeToBhuwan

2つの問題

JQueryが適切にロードされなかったようです。

通常、このエラーが表示されます

Uncaught ReferenceError:$ is not defined

jQueryがページに適切に含まれていなかったとき。

CDNからjQueryを使用してみてください。問題が解決するはずです

交換

<script src="JS/jquery-1.10.1.min.js"></script>

cdnからのものと

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

注：ファイルシステムからテストする場合は、上記のURLにhttp:を追加する必要があります。そうしないと失敗します

次に、スクリプトファイルはHTMLの前にあります。したがって、DOM Readyハンドラーにコードを含める必要があります。

$(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 
        next:   '#next', 
        prev:   '#prev' 
    });
});

私の知る限り、div IDを作成したときに「スライダー」が参照されていました。

いいえそうではありません。スクリプトがbodyの直前に含まれていた場合、Readyハンドラーでスクリプトを囲むことはできません。しかし、あなたの場合、それは頭の中にあります。そのため、スクリプトが実行を開始したとき、特定の要素はまだDOMに存在しません

フィドルをチェック

9
Sushanth --

次の2つの問題がある可能性があります。

1）JQueryが正しくロードされていない可能性があります。 Chromeを使用してテストできます。正しくロードされているかどうかを確認するには、$またはjQueryを入力します。 Chrome Console

2）これは、他のJSライブラリにバンドルされているJQuery.jsでの経験に基づいています。この場合、$はサポートされず、$の代わりにjQueryを使用する必要があります。プロジェクトにロードしました。

window.jQuery = window.$ = jQuery;

http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js を使用しても機能しなかったが、 http://code.jquery.com/jquery-1.7.2.min.js

以下は私が編集したあなたのコードの唯一の部分であり、私にとってはうまく機能し始めました。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
3
Raghav

追加として。 .jsファイルで$（Jquery）を使用している場合。論理的には、すべてのライブラリまたはフレームワークはその.jsファイルの前にある必要があります。

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
1
Sergii Lisnychyi

私はこの問題を抱えていましたが、原因は上記のシナリオとは非常に異なっていました。私のサイトは以前のAndroid（2.2）を除くすべての場所で機能していました。このデバイスはcode.jquery.com CDNでhttps証明書を拒否していたため、JQueryをロードしていませんでした。代わりに、https Google CDNからJQueryリソースをロードすることでした（上記の他の名前のURLを使用）。

0
Frank Carnovale