JQuery代码不工作。我做错了什么？回调、变量范围、链接？

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

收缩一次API工具
收缩一次API工具
window.jQuery | | document.write（“”）
$（函数（）{
变量apiKeyForm=''
+'输入您的API密钥'
+ ''
+'您可以找到您的访问密钥'
+“保存”
+ '';
变量apiLinkForm=''
+“添加一两个链接……或更多。”
+“添加”
+“删除”
+“重置”
+“提交”
+“
”
+ ''
+ ''
+ '';
变量i=$（'#linkForm input'）.size（）+1；
$（'#添加'）。单击（函数（）{
$（''）.fadeIn（'slow'）.appendTo（'#linkForm'）；
i++；
返回false；
});
$（“#删除”）。单击（函数（）{
如果（i>1）{
$（'.shrinklink:last'）.fadeOut（'normal'，function（）{$（this.remove（）；}）；
我--；
}
返回false；
});
$（“#重置”）。单击（函数（）{
而（i>2）{
$（'.shrinklink:last'）.remove（）；
我--；
}
返回false；
});
$（“#saveAPIKey”）。单击（函数（）{
if（typeof$（'#apiKey'）.val（）！==null）{
setItem（apiKey，$（'#apiKey'）.val（））；
$（apiKeyForm）.fadeIn（'slow'）.appendTo（'mainFormContent'）；
}
否则{
警报（“未设置API密钥！”）；
}
返回false；
});
如果（localStorage.length>0）{
$（“您尚未输入API令牌。请将其添加到下面，它将被保存在内存中。”）.fadeIn（'slow'）.appendTo（'flashAlert'）；
$（apiLinkForm）.fadeIn（'slow'）.appendTo（'mainFormContent'）；
}
否则{
$（'您的API标记是'+localStorage.getItem（apiKey）+'.'）.fadeIn（'slow'）.appendTo（'.flashAlert'）；
$（apiKeyForm）.fadeIn（'slow'）.appendTo（'mainFormContent'）；
}
});

---

您没有在任何地方定义名为“apiKey”的变量，这会在下面的行中抛出一个js错误

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

$（“您的API令牌是”+localStorage.getItem（apiKey）+.”）.fadeIn（'slow'）.appendTo（'flashAlert'）；

---

请参见不确定，但可能应该是

localStorage.getItem（'apiKey'）

没有看到任何要附加到DOM的

apiKeyForm

abd

aplinkform

的地方。这是代码的最后一部分，从底部开始的第4-11行。是的，但从来没有发生过，因为没有定义

apiKey

你确定吗？在我添加本地存储检查之前，我有一个警报（）这会提醒apiKey localStorage键，它工作正常，它显示了用户在按下“保存”按钮时输入的值。请原谅我的直言不讳（我不想这么做），但apiKey以前工作正常…正如我在下面回答的，您可能是meen

localStorage.getItem（'apiKey'）

而不是

localStorage.getItem（apiKey）

它本身不是一个变量值，它是一个在此行中声明的localStorage键：localStorage.setItem（apiKey，$（'#apiKey'）.val（）；setItem的第一个参数是一个字符串，您的代码正在抛出一个js错误，因为您试图访问一个未定义的变量。这解决了表单不显示的问题，但flash消息仍然在回避我。您应该在将节点附加到DOM后初始化您的单击处理程序，并且应该首先执行

。appendTo

和紧随其后的

.fadeIn

例如：

$（apiLinkForm）.fadeIn（'slow'）.appendTo（'mainFormContent'）；

应该是

$（apiLinkForm）.appendTo（'mainFormContent'）.fadeIn（'slow'））

并且至少有一半的功能可以使用。如果你认为这个答案对你有用，你可以投票决定。如何初始化点击处理程序？我将讨论最后一部分，看看它是否有区别。首先更改

.fadeIn

和

的顺序。追加到

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