web-dev-qa-db-fra.com

JavaScript Uncaught ReferenceError: jQuery n'est pas défini; Uncaught ReferenceError: $ n'est pas défini

Ceci est mon violon, http://jsfiddle.net/4vaxF/35/

Cela fonctionne bien dans mon violon.

Cependant, lorsque je le transfère à Dreamweaver, cela ne fonctionne pas. Et j'ai trouvé ces deux erreurs dans mon codage.

  1. Uncaught ReferenceError: jQuery n'est pas défini
  2. référence non capturée $ n'est pas défini

J'avais lu avant l'article qui traitait de ces deux erreurs, et essayé de résoudre selon la méthode fournie, cependant, cela ne fonctionne toujours pas, comment puis-je résoudre ce problème?

Voici mon codage complet dans 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

Parce que vous devez ajouter la bibliothèque jQuery à votre fichier:

jQuery l'interface utilisateur est juste un addon à jQuery ce qui signifie que
vous devez d’abord inclure la bibliothèque jQuery puis le UI .

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

Vous n'avez pas inclus la bibliothèque jQuery. En plein son c'est déjà là. Il suffit d’inclure cette ligne dans votre tête.

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

Vous avez une erreur dans la construction de votre balise de script, ceci:

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

Devrait ressembler à ceci:

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

Vous avez un "script" Word perdu au milieu de votre balise script. En outre, vous devez supprimer http: // pour permettre au navigateur d’utiliser HTTP ou HTTPS.

MISE À JOUR

Mais votre principale erreur est que vous incluez l'interface utilisateur jQuery (UNIQUEMENT). Vous devez d'abord inclure jQuery! jQuery UI et jQuery sont utilisés ensemble, pas séparément. L'interface utilisateur de jQuery dépend de jQuery. Vous devriez mettre cette ligne avant l'interface utilisateur de jQuery:

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