2016-07-24 3 views
0

У меня есть начало того, что я принимаю веб-сайт, который я делаю в качестве эксперимента. Он отлично работал в режиме предварительного просмотра в скобках, но затем я сохранил файлы, и теперь ни один из jQuery не работает. Я думаю, что это мой код, это может быть что-то с скобками, так как это произошло только после того, как я спасся. Вот мой код:jQuery в скобках Live Preview не работает

$(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>

Есть ли что-то не так с этим, или я должен попробовать другой редактор?

+1

Посмотрите на консоли в инструменты Dev, у вас есть ошибка синтаксиса: 'если ввести { ', также вы забыли'() 'после первых двух' $ (this) .stop' lines –

ответ

0

вы должны отредактировать follwing из

В HTML

<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> 

В JS

var newNote = function(enter) { 

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

Я исправил это, и он все еще не работает. Я заметил, что если я 'alert (« test »)' вне '$ (document) .ready (function() {' он работает, но если он внутри, это не так. – septicorn

+0

видеть, что он работает https: // jsfiddle .net/h0wc80w9/ –

+0

Ладно спасибо, наверное, я что-то пропустил: / – septicorn

Смежные вопросы