为什么这在jsfiddle中有效，但在我的文档中却没有 [英] Why does this work in jsfiddle but not in my document
问题描述
我找到了一个很棒的jsfiddle，有人制作并想在我的项目中使用它的一部分：
I found a wonderful jsfiddle that someone has made and wanted to use part of it in my project:
http://jsfiddle.net/manuel/29gtu/
它适用于jsfiddle但不适用在我的HTML文档中。以下是我的文档：
It works on the jsfiddle but not in my HTML document. Here is what in my document:
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-1.7.2.js"></script>
<script>
$("button").click(function() {
var id = $("#id").val();
var text = "icon-"+id;
// update the result array
var result = JSON.parse(localStorage.getItem("result"));
if(result == null)
result = [];
result.push({id: id, icon: text});
// save the new result array
localStorage.setItem("result", JSON.stringify(result));
// append the new li
$("#bxs").append($("<li></li>").attr("id", "item-"+id).html(text));
});
// on init fill the ul
var result = JSON.parse(localStorage.getItem("result"));
if(result != null) {
for(var i=0;i<result.length;i++) {
var item = result[i];
$("#bxs").append($("<li></li>").attr("id", "item-"+item.id).html(item.icon));
}
}
</script>
</head>
<body>
<ul id="bxs" class="tabs">
</ul>
<input type="text" id="id" /><button>save</button>
</body>
</html>
代码从小提琴中复制并粘贴。我认为这与我没有本地存储插件有关。
为了让那个jsfiddle工作，我需要一些我缺少的外部插件吗？
The code is copied and pasted from the fiddle. I think it has to do with me not having a plugin for local storage. For that jsfiddle to work, do I need some external plugin that I am missing?
推荐答案
你应该包装你的整个代码在 $（文件）.ready（function（）{...}）;
You should wrap your whole code within $(document).ready(function() {...});
所以。
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var id = $("#id").val();
var text = "icon-" + id;
// update the result array
var result = JSON.parse(localStorage.getItem("result"));
if (result == null) result = [];
result.push({
id: id,
icon: text
});
// save the new result array
localStorage.setItem("result", JSON.stringify(result));
// append the new li
$("#bxs").append($("<li></li>").attr("id", "item-" + id).html(text));
});
// on init fill the ul
var result = JSON.parse(localStorage.getItem("result"));
if (result != null) {
for (var i = 0; i < result.length; i++) {
var item = result[i];
$("#bxs").append($("<li></li>").attr("id", "item-" + item.id).html(item.icon));
}
}
});
</script>
注意
jsfiddle onLoad 模式为你做这件事，即从左边选择 onLoad 侧面板下拉，然后在DOM中出现所有资源后执行所有js代码。
Note
In jsfiddle onLoad mode do that for you, i.e. when you select onLoad from left side panel drop down, then all js code execute after all resources become appeared in the DOM.
这篇关于为什么这在jsfiddle中有效，但在我的文档中却没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
