web-dev-qa-db-ja.com

キャッチされない参照エラー：$は定義されていないエラー

このコードをチュートリアルから取得して、javascript/jQueryで自動進行スライドショーを作成しました。これは、jsfiddleでうまく機能します。ただし、すべてをDreamweaverに取り込むと、機能しなくなるようです。すべてが揃っているので、関連するすべてのファイル（.jsと.css）とjQueryライブラリをリンクしました。どういうわけか全く動かないのですが。これがコードです。

HTML

<div class="fadeIn">
            <img src="image1.png" height="500" width="800"/>
            <img src="image2.png" height="500" width="800"/>
            <img src="image3.png" height="500" width="800"/>
            <img src="image4.png" height="500" width="800"/>
        </div>

CSS

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

これがヘッダーです

<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="SlideShow.css">
javascriptjqueryhtmlcssslideshow
4
Ivan P - Digital Alchemist

簡単に試してみたところ、あなたが言ったエラーを再現することができました。関数に外部jsファイルがあり、他のJSライブラリに依存している場合は、最初にそのライブラリをロードしてから、関数に依存するJSファイルを作成する必要があります。

たとえば、これは機能しません。

<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

なぜなら、JSインタープリターが$を検索する前に、ロードされて定義されることさえあるからです。

しかし、これは機能します：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>
11
Alan Kis

現在のバージョンのjqueryを実行していることを確認してください。これをヘッドセクションに含めます

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

chrome右クリックして、要素、コンソール、エラーを検査している場合は、コンソールログでエラーを確認してください。

コードは私にはよく見え、同様に機能します。

1
Sergio Wizenfeld

うーん、できることを行うには、最初にすべてがロードされていることを確認する必要があります

window.onload = function() {
    $(function(){
    　　　　('.fadeIn img:gt(0)').hide();
    　　　　setInterval(function(){
    　　　　$('.fadeIn :first-child').fadeOut()
        　　.next('img').fadeIn()
        　　.end().appendTo('.fadeIn');
    　　　　}, 3000);
　　});

}

これは、domがすべてのスクリプトのロードを完了した後、関数を実行する時間であることを意味します。

0
Emil Reña Enriquez