it-swarm.com.de

Nicht abgerufener ReferenceError: $ ist nicht definiert

Diese Fehlermeldung wird angezeigt, wenn Sie versuchen, einen JQuery-Bildschieber zu erstellen. 

Nicht abgerufener ReferenceError: $ ist nicht definiert

Hier ist meine NEUE Codierung (HINWEIS, dass ich das Skript auf die Seite verschoben habe, dies wurde von Adobe vorgeschlagen.):

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}
</style>
</head>

<body bgcolor="#999999" text="#000000">

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <th height="132" align="left" scope="col">&nbsp;</th>
    <th scope="col"><div class="spacer" id="spacer"></div>
      <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
    <hr></th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</th>
    <td width="85%" align="left" valign="top" scope="col">
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>

    <div id="slideshowwrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=           "Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
        <div class="controller" id="next"></div>
      </div>
    </div></td>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});
</script>
</body>
</html>

Mein Ordnerpfad zum JS-Ordner für meine Website (lokal) sieht folgendermaßen aus: C:\Users\Andrew\Desktop\GCFS\JS

Ich bin neu in der Welt der Kodierung, aber was ich zu erreichen versuche, ist ziemlich einfach. Soweit ich weiß, brauche ich keine Bereitschaftsfunktion und das Javascript sollte automatisch laufen. Vielen Dank für Ihre Hilfe! 

Aus Kommentar

Als ich das ausprobierte, schlug es auch fehl

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
}); 
</script>
8
MasterFuel

Die Lösung:

1) Verwenden Sie Google CDN, um jQuery zu laden

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2) Soweit ich über das Cycle Plugin Bescheid wisse, ist es mit jQuery v1.5-v1.7 kompatibel, da die meisten Methoden in jQuery 1.8+ veraltet waren. Aus diesem Grund habe ich in Punkt 1 v1.5 von Google CDN-Jquery verwendet. Die meisten Beispiele für das Cycle-Plugin verwenden Jquery 1.5.

3) Löschen Sie Ihren Browser-Cache. Dies ist meistens der Hauptschuldige.

4) Bitte überprüfen Sie das Laden der Jquery anhand des nachstehenden Codes

if(typeof jQuery!=='undefined'){
    console.log('jQuery Loaded');
}
else{
    console.log('not loaded yet');
}

Major Edit:

Der Grund für den Fehler ist ziemlich einfach:

Sie haben die Cycle-Methode aufgerufen, bevor die Jquery geladen wird.

aufrufzyklusplugin auf DOM ready .. 

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });  
});
11
writeToBhuwan

2 Ausgaben.

Sieht so aus, als ob Ihre jQuery nicht richtig geladen wurde.

Sie sehen diesen Fehler im Allgemeinen

Uncaught ReferenceError:$ is not defined

wenn jQuery nicht ordnungsgemäß in Ihre Seite aufgenommen wurde.

Versuchen Sie es mit jQuery von CDN und es sollte Ihr Problem lösen

Ersetzen 

<script src="JS/jquery-1.10.1.min.js"></script>

mit dem von cdn

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

HINWEIS: Wenn Sie vom Dateisystem aus testen, müssen Sie den http: zur obigen URL hinzufügen, da sonst ein Fehler auftritt

Als nächstes befindet sich Ihre Skriptdatei vor der HTML. Daher muss der Code im DOM Ready-Handler enthalten sein.

$(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 
        next:   '#next', 
        prev:   '#prev' 
    });
});

Soweit ich weiß, wurde auf 'Slider' verwiesen, als ich die Div-ID erstellt habe.

Nein ist es nicht. Wenn Ihr Skript direkt vor dem Rumpf enthalten war, können Sie es möglicherweise nicht in den Ready-Handler einschließen. Aber in Ihrem Fall ist es im Kopf vorhanden. Wenn also das Skript ausgeführt wird, ist dieses bestimmte Element immer noch nicht in der DOM vorhanden.

Überprüfe Fiddle

9
Sushanth --

Möglicherweise gibt es zwei Probleme:

1) Die JQuery wurde möglicherweise nicht ordnungsgemäß geladen. Sie könnten es mit Chrome testen. Geben Sie $ oder jQuery ein, um zu prüfen, ob es richtig geladen ist .Chrome Console

2) Dies basiert auf meinen Erfahrungen in einigen JQuery.js, die mit anderen JS-Bibliotheken gebündelt worden wären, wobei $ nicht unterstützt wird und Sie gezwungen sind, jQuery anstelle von $ .__ zu verwenden js-Datei, die Sie in Ihr Projekt geladen haben.

window.jQuery = window.$ = jQuery;

Ich sehe, dass die Verwendung von http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js für mich nicht funktioniert hat, aber ich habe http: // code verwendet .jquery.com/jquery-1.7.2.min.js

Unten ist der einzige Teil in Ihrem Code, den ich bearbeitet habe, und es hat für mich gut funktioniert.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
3
Raghav

Als Zusatz. Wenn Sie $ (Jquery) in Ihrer .js-Datei verwenden. Logischerweise sollten alle Bibliotheken oder Frameworks vor dieser .js-Datei stehen.

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
1

Ich hatte dieses Problem, aber die Ursache war sehr unterschiedlich zu den oben beschriebenen Szenarien. Meine Website funktionierte überall, außer auf meinem älteren Android (2.2). Es stellte sich heraus, dass dieses Gerät das https-Zertifikat in der code.jquery ablehnte. com CDN, daher wurde JQuery nicht geladen. Das Update bestand darin, stattdessen JQuery-Ressourcen vom https-Google-CDN zu laden (mithilfe von URLs, die oben von anderen angegeben wurden).

0
Frank Carnovale