Javascript 为什么这在JSFIDLE中有效，而在我的文档中无效_Javascript_Jquery

Javascript 为什么这在JSFIDLE中有效，而在我的文档中无效

javascript jquery

Javascript 为什么这在JSFIDLE中有效，而在我的文档中无效,javascript,jquery,Javascript,Jquery,我发现有人制作了一个很棒的JSFIDLE，并希望在我的项目中使用它的一部分：它适用于JSFIDLE，但不适用于我的HTML文档。以下是我文件中的内容： <!DOCTYPE html> <html> <head> <script src="scripts/jquery-1.7.2.js"></script> <script> $("button").click(function() { var id = $("

我发现有人制作了一个很棒的JSFIDLE，并希望在我的项目中使用它的一部分：

它适用于JSFIDLE，但不适用于我的HTML文档。以下是我文件中的内容：

<!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>


$（“按钮”）。单击（函数（）{
var id=$（“#id”）.val（）；
var text=“icon-”+id；
//更新结果数组
var result=JSON.parse（localStorage.getItem（“结果”）；
如果（结果==null）
结果=[]；
push（{id:id，icon:text}）；
//保存新的结果数组
setItem（“result”，JSON.stringify（result））；
//追加新的li
$（“#bxs”）.append（$（“”）attr（“id”，“item-”+id）.html（文本））；
});
//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“结果”）；
如果（结果！=null）{
对于（var i=0；i放入$（document）。准备好像这样，也给出脚本标记的类型
<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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var id=$（“#id”）.val（）；
var text=“icon-”+id；
//更新结果数组
var result=JSON.parse（localStorage.getItem（“结果”）；
if（result==null）result=[]；
结果：推({
id:id，
图标：文本
});
//保存新的结果数组
setItem（“result”，JSON.stringify（result））；
//追加新的li
$（“#bxs”）.append（$（“”）attr（“id”，“item-”+id）.html（文本））；
});
//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“结果”）；
如果（结果！=null）{
对于（变量i=0；i”）attr（“id”，“item-”+item.id）.html（item.icon））；
}
}
});    
您应该将整个代码包装在$（document）.ready（function（）{…}）；

所以

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var id=$（“#id”）.val（）；
var text=“icon-”+id；
//更新结果数组
var result=JSON.parse（localStorage.getItem（“结果”）；
if（result==null）result=[]；
结果：推({
id:id，
图标：文本
});
//保存新的结果数组
setItem（“result”，JSON.stringify（result））；
//追加新的li
$（“#bxs”）.append（$（“”）attr（“id”，“item-”+id）.html（文本））；
});
//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“结果”）；
如果（结果！=null）{
对于（变量i=0；i”）attr（“id”，“item-”+item.id）.html（item.icon））；
}
}
});

注
在jsfiddle
onLoad
模式下，为您执行此操作，即当您从左侧面板下拉菜单中选择onLoad
时，所有js代码在所有资源出现在DOM中后执行。
如果您查看jsfiddle的右侧，您会看到您的代码是在DOM之后执行的onLoad并且加载了所有资源。您在这里发布的代码并非如此。从“[…]开始，我们在使用jQuery读取或操作文档对象模型（DOM）时所做的几乎所有事情都是这样的，我们需要确保在DOM准备好后立即开始添加事件等。为此，我们为文档注册一个就绪事件。[…]”.我建议你读一下：）。
<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>