代码

Question

代码

<!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()功能。应该发生的是点击按钮，弹出一个窗口，然后验证该名称是否可用。如果它可用，那么它会在屏幕上放置一个图标和一个标签。但现在它什么也没做。

JSFiddle：http://jsfiddle.net/5xQ3a/

注意：在JSFiddle中，我不得不取消<!doctype html>并将JavaScript和CSS放在单独的标签中。

现在完成！

Answer 1

这条线上有一个流氓支架：

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

使用＆＃34; JSHint＆＃34;你小提琴上的按钮可以通过以下方式显示这两个错误： - ）

我的按钮不会调用jQuery .click（）函数

代码

详细

1 个答案: