Brackets Live Preview中的jQuery无法正常工作

Question

我从开始以我正在做的网站做实验开始。 在括号中的实时预览中，它运行良好，但是后来我保存了文件，现在所有jQuery都不起作用。 我认为这是我的代码，因为它只在我保存后才发生，因此也可以放在方括号中。 这是我的代码：

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

这有什么问题吗？还是应该尝试其他编辑器？

Answer 1

您必须编辑以下内容

在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(),
      });
   }
}

Brackets Live Preview中的jQuery无法正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-24 19:38:10

Brackets Live Preview中的jQuery无法正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-24 19:38:10

解决方案1
0 已采纳 2016-07-24 19:38:10