it-swarm.com.de

Nicht erfasster Referenzfehler: $ ist kein definierter Fehler

Ich habe diesen Code aus einem Tutorial genommen, um eine automatisch vorlaufende Diashow in Javascript/jQuery zu erstellen. Wenn ich jedoch alles in Dreamweaver übersetze, scheint es einfach nicht mehr zu funktionieren. Alles ist da, ich habe alle relevanten Dateien (die .js und die .css) sowie die jQuery-Bibliothek verlinkt. Aus irgendeinem Grund wird es überhaupt nicht funktionieren. Hier ist der Code.

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

Das CSS

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

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

Die Javascript/jQuery

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

Hier ist der Header

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

Nach einem kurzen Versuch konnte ich den von Ihnen erwähnten Fehler reproduzieren. Wenn Sie externe JS-Dateien mit Ihrer Funktion haben, die auf anderen JS-Bibliotheken basieren, müssen Sie diese Bibliothek zuerst laden und dann die abhängige JS-Datei mit Ihren Funktionen.

Zum Beispiel funktioniert das nicht:

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

Weil die JS-Interpreter-Suche nach $ before sogar geladen und definiert ist.

Aber das wird funktionieren:

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

Stellen Sie sicher, dass Sie eine aktuelle Version von jquery ausführen. Fügen Sie dies in den Kopfbereich ein

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

Überprüfen Sie das Konsolenprotokoll auf Fehler, wenn Sie mit der rechten Maustaste auf Chrome klicken. Überprüfen Sie Element, Konsole und Fehler.

der Code sieht gut aus und funktioniert auch.

1

hmmm Sie müssen sicherstellen, dass zuerst alles geladen ist, um dies zu tun

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

}

Dies bedeutet, dass der dom nach dem Laden aller Skripte die Zeit hat, in der er Ihre Funktion ausführt.

0