2016-07-24 5 views
0

Ich habe den Anfang von Ich bemerke die Einnahme von Website, die ich als ein Experiment mache. Es funktionierte gut in der Live-Vorschau von Klammern, aber dann speicherte ich die Dateien und jetzt funktioniert keiner der jQuery. Ich denke es ist mein Code daran könnte auch etwas mit Brackets sein da es erst passiert ist wenn ich einmal gespart habe. Hier ist mein Code:jQuery in Brackets Live-Vorschau funktioniert nicht

$(document).ready(function() { 
 

 
    var notes = []; 
 

 
    $("#newNoteWrapper").hide(); 
 

 
    $(".text").focus(function() { 
 

 
    $(this).stop 
 
    $(this).animate({ 
 
     marginLeft: "+=3%" 
 
    }); 
 

 
    }); 
 
    $(".text").blur(function() { 
 

 
    $(this).stop 
 
    $(this).animate({ 
 
     marginLeft: "-=3%" 
 
    }); 
 

 
    }); 
 

 
    $(".button").hover(function() { 
 

 
    $(this).stop(); 
 
    $(this).animate({ 
 
     backgroundColor: "#108cb1" 
 
    }, 200); 
 

 
    }, function() { 
 

 
    $(this).stop() 
 
    $(this).animate({ 
 
     backgroundColor: "#2DBEEB" 
 
    }, 200); 
 

 
    }); 
 

 
    $("#newNoteButton").click(function() { 
 

 
    newNote(true); 
 

 
    }); 
 

 

 
    $("#doneButton").click(function() { 
 

 
    newNote(false); 
 

 
    }); 
 
}); 
 

 
var newNote = function(enter) { 
 

 
    if enter { 
 
    $("#newNoteWrapper").show(); 
 
    } else { 
 
    $("#newNoteWrapper").hide(); 
 
    notes.push({ 
 
     title: $("#noteTitle").val(), 
 
     body: $("#noteBody").val(), 
 
    }); 
 
    } 
 
}
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    background-color: #FFFFFF; 
 
    font-family: sans-serif; 
 
} 
 
.button { 
 
    padding: 15px 25px; 
 
    border: none; 
 
    font-size: 25px; 
 
    margin-bottom: 10px; 
 
    background-color: #2DBEEB; 
 
    color: #FFFFFF; 
 
    outline: none; 
 
} 
 
.text { 
 
    border: none; 
 
    outline: none; 
 
    width: 92%; 
 
    border-left: 10px solid #2DBEEB; 
 
    resize: vertical; 
 
    background-color: #FFFFFF; 
 
} 
 
#newNoteButton { 
 
    margin: 10px; 
 
} 
 
#newNoteWrapper { 
 
    z-index: 2; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: #FFFFFF; 
 
    top: 0%; 
 
} 
 
#newNote { 
 
    background-color: #2DBEEB; 
 
    color: #FFFFFF; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
#noteTitle { 
 
    font-size: 25px; 
 
    height: 50px; 
 
    margin: 10px 0px 10px 0px; 
 
} 
 
#noteBody { 
 
    font-size: 12pt; 
 
    height: 500px; 
 
    margin: 0px 0px 10px 0px; 
 
} 
 
#doneButton { 
 
    left: 0; 
 
    position: absolute; 
 
    margin-left: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="notes.css"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 
 
    <script src="notes.js"></script> 
 
    <title>Simple Notes</title> 
 
</head> 
 

 
<body> 
 

 
    <button id="newNoteButton" class="button">new note</button> 
 
    <div id="newNoteWrapper"> 
 
    <div id="newNote">new note</div> 
 
    <form> 
 
     <input type="text" id="noteTitle" class="text" placeholder="title..."></input> 
 
     <textarea id="noteBody" class="text" placeholder="body..."></textarea> 
 
     <br /> 
 
     <button id="doneButton" class="button">done</button> 
 
    </form> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

Gibt es etwas falsch mit diesem oder sollte ich versuchen, einen anderen Editor?

+1

Schauen Sie bearbeiten müssen, haben Sie einen Syntaxfehler: 'wenn geben Sie { ', auch du vergisst'() 'nach deinen ersten beiden' $ (this) .stop' Zeilen –

Antwort

0

Sie die follwing von

In HTML an der Konsole in den Entwicklungstools

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 

In JS

var newNote = function(enter) { 

    if (enter) { 
     $("#newNoteWrapper").show(); 
    } else { 
     $("#newNoteWrapper").hide(); 
     notes.push({ 
     title: $("#noteTitle").val(), 
     body: $("#noteBody").val(), 
     }); 
    } 
} 
+0

habe ich das behoben, und es funktioniert immer noch nicht. Ich habe festgestellt, dass, wenn ich 'alarmiert (" test ") außerhalb von $ (document) .ready (function() {' es funktioniert, aber wenn es drinnen ist, tut es nicht. – septicorn

+0

sehen, es läuft https: // jsfiddle .net/h0wc80w9/ –

+0

Okay danke, ich glaube ich habe etwas verpasst: / – septicorn