2014-03-12 53 views
0

代碼

<!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在單獨的標籤。

現已完成!

+0

提交按鈕會導致頁面提交...如果您不希望他們提交,請使用按鈕。 – epascarello

+0

從你的小提琴:'未捕獲的SyntaxError:意外的代幣)' – Ian

+0

@epascarello雖然我同意,在這種情況下,沒有提交頁面的表單 – Ian

回答

2

你必須在這條線上流氓支架:

icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png"); 

應該是:

icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png"; 

,你必須在這條線上缺少的支架:

} else if (_.contains(files, fileName) { 

應該是:

} else if (_.contains(files, fileName)) { 

使用您的小提琴上的「JSHint」按鈕順便說明這兩個錯誤:-)

+0

我在[ Thimble](http://thimble.webmaker.org)關閉「Show Hints」,我把它放在JSFiddle中,這樣你就可以看到它。 – ARM32