web-dev-qa-db-ja.com

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

これは私のフィドルです http://jsfiddle.net/4vaxE/35/

それは私のフィドルでうまく機能します。

ただし、それをdreamweaverに転送すると、機能しません。そして、コーディングでこの2つのエラーを見つけました。

  1. キャッチされないReferenceError：jQueryは定義されていません
  2. キャッチされていないreferenceerror $は定義されていません

この2つのエラーに関連する記事の前に読んで、提供された方法に従って解決しようとしましたが、まだ機能していませんが、どうすれば解決できますか？

Dreamweaverでの完全なコーディングを次に示します。

<body>
    <div class="buttons" style="background-color: rgba(0,0,0,.8);">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
    </div>

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script language="JavaScript" type="text/javascript">
var selectedEffect="explode";
var options = { percent: 100 };
$('#showdiv1').click(function () {
    $('div[id^=div]').hide();

    $('#div1').show( selectedEffect, options, 500, callback );
});
$('#showdiv2').click(function () {
    $('div[id^=div]').hide();
    $('#div2').show( selectedEffect, options, 500, callback );
});

$('#showdiv3').click(function () {
    $('div[id^=div]').hide();
    $('#div3').show( selectedEffect, options, 500, callback );
});

$('#showdiv4').click(function () {
    $('div[id^=div]').hide();
    $('#div4').show( selectedEffect, options, 500, callback );
});

function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };
</script>
</body>
</html>

CSS

<style type="text/css">

.button {
    cursor:pointer;
    display:inline-block;
    margin:10px;
    clip: rect(auto,auto,auto,auto);
}

#div1 {
    background:aqua;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div2 {
    background:blue;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div3 {
    background:orange;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}

#div4 {
    background:green;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
a {
    color:aqua;
    -webkit-filter: grayscale(1.0);
}
a:hover {
    color:red;
    -webkit-filter: grayscale(0.0);
}
</style>
jqueryjquery-uireferenceerror
13
Soo

ファイルにjQueryライブラリーを追加する必要があるため：

jQuery IはjQueryの単なるアドオンですつまり
最初にjQueryライブラリを含める必要があり、次に[〜＃〜] ui [〜＃〜]を含める必要があります。

<script src="path/to/your/jquery.min.js"></script>
<script src="path/to/your/jquery.ui.min.js"></script>
35
Roko C. Buljan

Jqueryライブラリが含まれていません。 jsfiddleでは、すでにそこにあります。この行をヘッドセクションに含めるだけです。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
4
sun_dare

スクリプトタグの構築にエラーがあります。これは次のとおりです。

<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

次のようになります。

<script language="JavaScript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

スクリプトタグの途中で「スクリプト」ワードが失われています。また、http：//を削除して、HTTPまたはHTTPSのどちらを使用するかをブラウザに決定させる必要があります。

[〜＃〜] update [〜＃〜]

しかし、主なエラーは、jQuery UIを含めることだけです（最初にjQueryを含める必要があります！）。 jQuery UIとjQueryは別々にではなく、一緒に使用されます。 jQuery UIはjQueryに依存しています。次の行をjQuery UIの前に配置する必要があります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
4
João Pinho