2017-03-12 2 views
0

Ich benutze einen JavaScript-Editor in www.sololearn.com/Codes/
Wenn ich $ Zeichen für eine jQuery setzen, heißt es, dass $ undefiniert ist.Wie fügen Sie jQuery zum SoloLearn Playground hinzu?

Wie kann ich eine jQuery zu meinem Code hinzufügen, so dass es funktioniert, aber den Code wie im Editor getrennt halten: ein Steckplatz für HTML, ein weiterer Steckplatz für CSS, ein anderer für JavaScript.

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <Title>Sum To Coins - Dynamic Programming</Title> 
</head> 
<body> 
    <div id="mainScreen"> 
     <p id="instructions">Insert a sum to turn it into coins</p> 

     <button class='Button' id="btn1">Button</button> 
     <button class='Button' id="btn2">Button</button> 
     <button class='Button' id="btn3">Button</button> 
     <br> 

     <p id="resultField">The coins are: </p> 

     <p id="matrixField"> </p> 


    </div> 

    <div id="pickCoinsScreen"> 
     <script src="jquery-3.1.1.min.js"></script> 

    </div> 

</body> 

CSS:

.Button:active, .active { 
    background-color:red; 
    color: white; 
} 

JavaScript:

$('.Button').click(function(
    $(this).toggleClass('active'); 
    e.preventDefault(); 
}); 

Antwort

1

Erstens Ihre Javascript-Code hat einige Fehler, so kann ich das gelöst haben und auch umgesetzt einige sein st Praktiken der Verwendung von jQuery "DOMReady" -Funktion.

$(function(){ 
    $('.Button').click(function(){ 
     $(this).toggleClass('active'); 
    }); 
}); 

im <head> Tag ich den Link eingefügt haben bei Google-Bibliothek von jQuery gehostet. Jetzt enthält Ihr Element diesen Code.

<head> 
    <Title>Sum To Coins - Dynamic Programming</Title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 

Randbemerkung: Ich habe e.preventdefault() entfernt, da es in diesem Fall nicht erforderlich ist.

Ich habe es auf Solo-lernen getestet, es scheint seine Arbeit.

+1

Danke Mann, du bist fantastisch! – Davis8988

Verwandte Themen