这个JavaScript解析代码我做错了什么?

时间:2014-08-27 19:42:23

标签: javascript jquery html

我正在尝试为我的网站的一部分制作一个简单的HTML编辑器,而不需要像Ace或TinyMCE这样的东西。问题是,当我使用本地存储时,保存功能似乎可以工作,但视图功能不会将注释更改为已保存的注释。

我在this URL为你们所有人制作了一个JSFiddle。

这是我的HTML代码:

<html>
<head>
    <!-- Begin Section 1: Metas -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <!-- End Section 1: Metas -->
    <!-- Begin Section 2: Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.1.3/nprogress.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.mxpnl.com/libs/mixpanel-2.2.min.js" type="text/javascript"></script>
    <script src="https://secure.quantserve.com/quant.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/ladda.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/spin.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js" type="text/javascript"></script>
    <script src="scripts/app/app.js" type="text/javascript"></script>
    <!-- End Section 2: Scripts -->
    <!-- Begin Section 3: Stylesheets and Links -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.1.3/nprogress.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Roboto|Roboto+Slab" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/ladda.min.css" rel="stylesheet" type="text/css">
    <link href="stylesheets/app/app.css" rel="stylesheet" type="text/css">
    <!-- End Section 3: Stylesheets and Links -->
    <!-- Start Section 4: Required Elements -->
    <title>Superpad Editor</title>
    <!-- End Section 4: Required Elements -->
</head>
<body>
    <div class="container animated bounce">
        <div class="errors"></div>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="navbar-brand navbar-brand-centered"><span class="brand-logo">Superpad</span></div>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="navbar-brand-centered">
                        <ul class="nav navbar-nav">
                        </ul>
                        <ul class="nav navbar-nav navbar-right">        
                        </ul>
                    </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <div class="btn-group">
            <button type="button" class="btn btn-primary" id="save">Save Notes</button>
            <button type="button" class="btn btn-success" id="view">View Saved Notes</button>
        </div>
        <div contenteditable class="content-editable normal editor"></div>
    </div>
</body>
</html>

这是我的JavaScript(它使用jQuery):

NProgress.start();
mixpanel.init("<CENSORED FOR SECURITY>");
mixpanel.track("Page Loads");
NProgress.done();
$(document).ready(function(){
if (Modernizr.localstorage) {
    console.log("L.S.W.");
} else {
    $(".errors").append("<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;<\/span><span class="sr-only">Close<\/span><\/button><strong>Oh snap!<\/strong> Local Storage doesn't work on your browser. Saving won't work, so you might want to keep this open if you want to keep your notes.<\/div>");
    NProgress.done();
};
$("#save").click(function() {
    localStorage["note"] = JSON.stringify($(".editor").html());
});
$("#view").click(function() {
    if (localStorage["note"] != null) {
        var contentsOfOldDiv = JSON.parse(localStorage["note"]);
        $(".editor").    
        $("div.fifth").replaceWith(contentsOfOldDiv);
    } else {
        $(".errors").append("<div class=alert alert-info alert-dismissible> role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;<\/span><span class="sr-only">Close<\/span><\/button><strong>Heads up!<\/strong> No save was detected. Did you save before?<\/div>");
    };
});
});

那么我做错了什么(我从另一个Stack Overflow主题获得了JSON解析的想法!)?

1 个答案:

答案 0 :(得分:0)

您有几个语法问题。例如下面的行:

$(".errors").append("<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;<\/span><span class="sr-only">Close<\/span><\/button><strong>Oh snap!<\/strong> Local Storage doesn't work on your browser. Saving won't work, so you might want to keep this open if you want to keep your notes.<\/div>");

$(".errors").append("<div class=alert alert-info alert-dismissible> role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;<\/span><span class="sr-only">Close<\/span><\/button><strong>Heads up!<\/strong> No save was detected. Did you save before?<\/div>");

您需要转义"字符或使用单引号。这可能无法解决您的问题,但这是一个开始。当执行到达该行时,您的代码失败,并且无法继续,这可能解释了为什么您没有得到预期的结果。

尝试使用浏览器开发人员工具查找代码中的任何错误。 This page提供了有关在浏览器中查找和使用开发工具的一些信息。 JSFiddle中的错误显示为:

Uncaught SyntaxError: Unexpected identifier 

如果您修复报价问题,则会收到错误:

Uncaught ReferenceError: mixpanel is not defined 

继续浏览控制台中的错误,看看是否可以通过这种方式缩小问题范围。