为什么这在jsfiddle中有效，但在我的文档中却没有
[英]Why does this work in jsfiddle but not in my document
问题描述
I found a wonderful jsfiddle that someone has made and wanted to use part of it in my project: 
我找到了一个很棒的jsfiddle，有人制作并希望在我的项目中使用它的一部分：
http://jsfiddle.net/manuel/29gtu/ http://jsfiddle.net/manuel/29gtu/
It works on the jsfiddle but not in my HTML document. 它适用于jsfiddle，但不适用于我的HTML文档。 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>
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? 为了让jsfiddle工作，我需要一些我缺少的外部插件吗？
2 个解决方案
解决方案1
10 已采纳 2012-08-08 17:49:55
You should wrap your whole code within $(document).ready(function() {...}); 你应该将整个代码包装在$(document).ready(function() {...});
So. 所以。
<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>
Note 注意
In jsfiddle onLoad mode do that for you, ie when you select onLoad from left side panel drop down, then all js code execute after all resources become appeared in the DOM. 在jsfiddle onLoad模式中为你做这件事，即当你从左侧面板下拉选择onLoad时，所有js代码在所有资源出现在DOM中之后执行。
解决方案2
3 2012-08-08 17:49:38
Put in $(document).ready like this, Also give type of script tag 放入$(document).ready就像这样，也给出脚本标签的类型
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.