代碼
<!doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title>Icons</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "https://documentcloud.github.com/underscore/underscore-min.js"></script>
<style>
label {
font-size: 15px;
font-family: sans-serif;
position: fixed;
left: 50px;
padding-top: 8px;
}
</style>
<script>
$(document).ready(function(){
$("#editor").hide();
var files = [];
var docFileEXTs = ["docx", "txt", "doc", "docm", "dot", "dotx", "dotm"];
$("#newFolder").click(function(){
var folderName = prompt("Folder Name:");
if (folderName === null) {
} else if (folderName === "") {
alert("Folder name can't be empty!");
} else if (_.contains(files, folderName)) {
alert("That folder name is already taken.");
} else {
$("body").append('<label>' + folderName + '</label>');
$("body").append('<img class = "folder" src = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Folder-icon.png"/>');
$("body").append('<br/>');
files.add(folderName);
};
});
$("#newFile").click(function(){
var fileName = prompt("File Name:");
var icon;
if ($.inArray(fileName.split(".", 2)[1], docFileEXTs) !== -1) {
icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-icon.png";
} else {
icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png");
};
if (fileName === null) {
} else if (fileName === "") {
alert("File name can't be empty!");
} else if (_.contains(files, fileName) {
alert("That file name is already taken.");
} else {
$("body").append('<label class = "file" index = "' + files.length + '">' + fileName + '</label>');
$("body").append('<img class = "file" src = "' + icon + '"/>');
$("body").append('<br/>');
files.add(fileName);
};
});
});
</script>
</head>
<body>
<input type = "submit" value = "New Folder" id = "newFolder"/>
<input type = "submit" value = "New File" id = "newFile"/>
<hr/>
</body>
</html>
詳細
我的按鈕將不會對我的jQuery .click()
響應函數。應該發生的事情是點擊按鈕,彈出一個窗口,然後驗證該名稱是否可用。如果可用,則在屏幕上放置一個圖標和一個標籤。但現在它什麼都不做。我的按鈕就不會調用jQuery的。點擊()函數
的jsfiddle:http://jsfiddle.net/5xQ3a/
注:在的jsfiddle,我只好脫下<!doctype html>
,把JavaScript和CSS在單獨的標籤。
現已完成!
提交按鈕會導致頁面提交...如果您不希望他們提交,請使用按鈕。 – epascarello
從你的小提琴:'未捕獲的SyntaxError:意外的代幣)' – Ian
@epascarello雖然我同意,在這種情況下,沒有提交頁面的表單 – Ian