web-dev-qa-db-fra.com

Erreur de référence non capturée: $ n'est pas une erreur correctement

J'ai pris ce code d'un tutoriel pour faire un diaporama automatique en javascript/jQuery et il fonctionne à merveille en jsfiddle. Cependant, lorsque j'apporte tout dans Dreamweaver, il semble que tout cesse de fonctionner. Tout y est, j'ai lié tous les fichiers pertinents (les fichiers .js et .css) ainsi que la bibliothèque jQuery. Pour une raison quelconque, cela ne fonctionnera pas du tout. Voici le code.

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

Le CSS

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

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

Le Javascript/jQuery

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

Voici l'en-tête

<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

Après un essai rapide, j'ai réussi à reproduire l'erreur que vous avez mentionnée. Si vous avez des fichiers js externes avec votre fonction, qui se trouvent sur d’autres bibliothèques JS, vous devez charger cette bibliothèque d’abord , puis le fichier JS dépendant avec vos fonctions.

Par exemple, cela ne fonctionnera pas:

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

En effet, la recherche par interprète JS de $ before est même chargée et définie.

Mais cela fonctionnera:

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

Assurez-vous que vous utilisez une version actuelle de jquery. inclure ceci dans la section principale

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

vérifiez si le journal de la console contient des erreurs si vous êtes sur le bouton droit de la souris, inspectez les éléments, la console et les erreurs.

le code me semble bien et fonctionne aussi.

1
Sergio Wizenfeld

hmmm Vous devez vous assurer que tout est chargé en premier pour faire ce que vous pouvez faire

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

}

Cela signifie qu’après que le dom ait fini de charger tous les scripts, c’est le moment où il exécutera votre fonction.

0
Emil Reña Enriquez