Question

基本上，我有两个空div的HTML5标记。我想使用JQuery根据是否存在单个localStorage值，使用两个单独的表单和两个单独的flash消息来填充这些div。正如我一直在构建它，它一直在努力，直到我编写动态显示表单的代码。有人可以玩这个代码并告诉我我缺少什么吗？我不是JavaScript专家（但我想成为） - 我在这里陷入了困境。编辑：到目前为止，修复了不显示的表单问题。但是flash消息也没有出现，当按下按钮时，它不再将值存储在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>

Answer 1

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

Answer 2

您没有在任何地方定义名为“apiKey”的变量，这会在以下行中引发js错误。

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

请参阅http://jsfiddle.net/aLF6p/

JQuery代码无法正常工作。我究竟做错了什么？回调，变量范围，链接？

2 个答案: