jQuery 括号实时预览不工作
jQuery in Brackets Live Preview not working
我开始做笔记网站作为实验。它在括号中的实时预览中工作正常,但后来我保存了文件,现在 jQuery 的 none 可以正常工作。我认为这是我的代码,它也可能与括号有关,因为它只在我保存后发生。这是我的代码:
$(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>
这有什么问题吗?还是我应该尝试其他编辑器?
您必须编辑以下
在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(),
});
}
}
我开始做笔记网站作为实验。它在括号中的实时预览中工作正常,但后来我保存了文件,现在 jQuery 的 none 可以正常工作。我认为这是我的代码,它也可能与括号有关,因为它只在我保存后发生。这是我的代码:
$(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>
这有什么问题吗?还是我应该尝试其他编辑器?
您必须编辑以下
在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(),
});
}
}