Javascript-Element kollabiert nicht funktioniert

Hier ist mein Problem. Ich habe den Code, den Sie unten sehen. Warum funktioniert es nicht so wie hier: http://jsfiddle.net/e6kaV/33/?
Es ist der Fehler, der mir gezeigt:
{
"message": "Nicht abgefangene Reference: ist $ nicht definiert",
"Dateiname": "http://stacksnippets.net/js",
"lineno": 54,
"colno": 13
}
Jede Hilfe wird geschätzt, weil ich nicht weiß, wie JS oder jQuery funktioniert.Javascript-Element kollabiert nicht funktioniert

.pane-launcher{ 
 
    position:absolute; 
 
    top: 0; 
 
    width:80px; 
 
    height:80px; 
 
    display:block; 
 
} 
 
#rules { 
 
    left:0px; 
 
} 
 
#scenarios { 
 
    left:90px; 
 
} 
 
.pane{ 
 
    position:absolute;  
 
    left: 0; 
 
    height:50px; 
 
    display:none; 
 
    opacity:1; 
 
} 
 
#rules-pane { 
 
    top:80px; 
 
    width:170px; 
 
    background-color:yellow; 
 
} 
 

 
#scenarios-pane { 
 
    top:80px; 
 
    width:170px; 
 
    background-color:blue; 
 
}

<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title>TEST</title> 
 
     <link rel="stylesheet" href="css.css"> 
 
    </head> 
 
    <body> 
 
     <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
     <div id="rules-pane" class="pane">Model1</div> 
 
     <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
     <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div> 
 

 
     <script> 
 
      $(".pane-launcher").click(function() { 
 
\t // Set the effect type 
 
    var effect = 'slide'; 
 
    
 
    // Set the options for the effect type chosen 
 
    var options = { direction: 'up' }; 
 
    
 
    // Set the duration (default: 400 milliseconds) 
 
    var duration = 700; 
 
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active'); 
 
});</script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </body> 
 
</html>

Quelle

2016-07-27 Lukáš Jirůšek

Wo hast du die JQuery? Ihre jQuery wurde nicht geladen, daher ist $ im Moment des Aufrufs undefiniert. Fügen Sie den jQuery-Referenzlink direkt vor dem body-closing-Tag ein. –

@damianocelent Ist das nicht: was meinst du? Ich dachte, das ist die jQuery und ich habe sie schon dort. –

Ja, das, wo hast du es in deinem html hingelegt? Setzen Sie es vor, ich merke nur, es ist ein Kinderspiel, versuchte es und ich bekomme nicht den gleichen Fehler. –

laden jQuery, bevor es mit:

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>TEST</title> 
     <link rel="stylesheet" href="css.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
     <div id="rules-pane" class="pane">Model1</div> 
     <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
     <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div> 

    <script> 
    $(".pane-launcher").click(function() { 
     // Set the effect type 
     var effect = 'slide'; 

     // Set the options for the effect type chosen 
     var options = { direction: 'up' }; 

     // Set the duration (default: 400 milliseconds) 
     var duration = 700; 
     $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active'); 
    }); 
    </script> 
    </body> 
</html>

Ich habe es in den <head> aber man kann es überall setzen, solange es vor dem Code ist, dass $ verwendet ($ ist jQuery).

Quelle

2016-07-27 20:24:44 sebnukem

Sie sollten jquery hinzufügen, bevor Sie es verwenden können. Hier ist das Arbeitsbeispiel. Ich habe gerade das Script-Tag von jQuery von unten entfernt und es vor anderen Skripten platziert.

Hier ist der Stift http://codepen.io/anon/pen/xOzjWg

$(".pane-launcher").click(function() { 
 
\t // Set the effect type 
 
    var effect = 'slide'; 
 
    
 
    // Set the options for the effect type chosen 
 
    var options = { direction: 'up' }; 
 
    
 
    // Set the duration (default: 400 milliseconds) 
 
    var duration = 700; 
 
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active'); 
 
});

.pane-launcher{ 
 
     position:absolute; 
 
     top: 0; 
 
     width:80px; 
 
     height:80px; 
 
     display:block; 
 
    } 
 
    #rules { 
 
     left:0px; 
 
    } 
 
    #scenarios { 
 
     left:90px; 
 
    } 
 
    .pane{ 
 
     position:absolute;  
 
     left: 0; 
 
     height:50px; 
 
     display:none; 
 
     opacity:1; 
 
    } 
 
    #rules-pane { 
 
     top:80px; 
 
     width:170px; 
 
     background-color:yellow; 
 
    } 
 

 
    #scenarios-pane { 
 
     top:80px; 
 
     width:170px; 
 
     background-color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
<div id="rules-pane" class="pane">Model1</div> 
 
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

Quelle

2016-07-27 20:27:26 Zain

Das gleiche Problem, jetzt Ich kann diese farbigen Kästen zeigen, aber ich kann sie nicht verstecken. :/Die Animation funktioniert nicht so gut:/ –

Include jquery ui, es fehlt – Zain

Danke für die Hilfe, schon funktioniert es, vor allem dank Ihrem Rat. –

Vielen Dank für Hilfe jeder, habe es funktioniert, nachdem ich diese 3-Scripts enthalten verknüpfen (die eine Antwort in vorgeschlagenen damit verbundene Frage war).

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Quelle

2016-07-27 21:11:19

Javascript-Element kollabiert nicht funktioniert

Antwort

Verwandte Themen