1

基本上，我有两个空 div 的 HTML5 标记。我想使用 JQuery 根据是否存在单个 localStorage 值来用两个单独的表单和 2 个单独的 flash 消息填充这些 div。在我构建它的过程中，它一直在工作，直到我编写了用于动态显示表单的代码。有人可以玩弄这段代码并告诉我我缺少什么吗？我不是 JavaScript 专家（但我想成为）——我在这里陷入了困境。编辑：到目前为止，修复了表单不显示的问题。但是闪烁消息也没有出现，当按下按钮时，它不再将值存储在 localStorage 中，它使表单消失然后再次淡入。:(

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Shrink Once API Tools</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"></link>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <h1 class="head-title">Shrink Once API Tools</h1>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div id="flashAlert">

                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="mainFormContent">

                </div>
            </div>
        </div>
    </div>

    <!-- Include JavaScript at the very bottom for faster page loads -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--
    Fall back on local JQuery if Google CDN version is unavailable.
    (Since most sites link the Google CDN version, it is more likely
    to already be cached by the user's browser).
    -->
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <!-- end Fallback -->
    <script src="js/bootstrap.js"></script>
    <script>
        $(function () {
            var apiKeyForm = '<form>'
                           + '<legend>Enter your API Key</legend>'
                           + '<input type="text" id="apiKey" class="span12" placeholder="e.g. ab12c34d5678efgh90123i45678j90k1">'
                           + '<span class="help-block">You can find your access key <a href="https://shrinkonce.com/index.php?menu=usercp#tools" target="blank">here.</a></span>'
                           + '<button type="submit" id="saveAPIKey" class="btn btn-info btn-large btn-block">Save</button>'
                           + '</form>';

            var apiLinkForm = '<form>'
                            + '<legend>Add a link or two... or more.</legend>'
                            + '<button id="add" class="btn btn-large">Add</button>'
                            + '<button id="remove" class="btn btn-large">Remove</button>'
                            + '<button id="reset" class="btn btn-large">Reset</button>'
                            + '<button type="submit" class="btn btn-info btn-large">Submit</button>'
                            + '<hr />'
                            + '<div id="linkForm">'
                            + '</div>'
                            + '</form>';

            var i = $('#linkForm input').size() + 1;
            $('#add').click(function () {
                $('<input type="text" id="inputLink' + i + '" class="shrinklink span12" placeholder="http://google.com">').fadeIn('slow').appendTo('#linkForm');
                i++;
                return false;
            });
            $('#remove').click(function () {
                if (i > 1) {
                    $('.shrinklink:last').fadeOut('normal', function () { $(this).remove(); });
                    i--;
                }
                return false;
            });
            $('#reset').click(function () {
                while (i > 2) {
                    $('.shrinklink:last').remove();
                    i--;
                }
                return false;
            });
            $("#saveAPIKey").click(function () {
                if (typeof $('#apiKey').val() !== null) {
                    localStorage.setItem(apiKey, $('#apiKey').val());
                    $(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
                }
                else {
                    alert("API Key not set!");
                }
                return false;
            });

            if (localStorage.length > 0) {
                $('<div class="alert alert-error">You have not yet entered your API token. Add it below, and it will be persisted in memory.</div>').fadeIn('slow').appendTo('.flashAlert');
                $(apiLinkForm).fadeIn('slow').appendTo('.mainFormContent');
            }
            else {
                $('<div class="alert alert-success">Your API token is ' + localStorage.getItem(apiKey) + '.</div>').fadeIn('slow').appendTo('.flashAlert');
                $(apiKeyForm).fadeIn('slow').appendTo('.mainFormContent');
            }
        });
    </script>
</body>

4

2 回答 2

2

不确定，但也许应该是localStorage.getItem('apiKey')

于 2012-10-24T22:35:41.743 回答
1

您尚未在任何地方定义名为“apiKey”的变量，这会在下一行引发 js 错误。 

$('<div class="alert alert-success">Your API token is ' + localStorage.getItem(apiKey) + '.</div>').fadeIn('slow').appendTo('.flashAlert');

见http://jsfiddle.net/aLF6p/

于 2012-10-24T22:29:10.420 回答