Question

我的jQuery代码可以在jsfiddle上运行，但不能在Dreamweaver上运行，也不能在浏览器上运行？这是我在JSfiddle上的代码的链接，下面是我的代码。请帮我检查是否有遗漏的东西？ http://jsfiddle.net/sbmp3apz/6/

HTML：

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
<script type="text/javascript" src="script2.js"></script>
<meta charset="utf-8">
<title>lab1</title>
</head>

<body>
pick your fruit:
<input type="text" id="newfruit">
<br>

<h1> Fruit Shelf:</h1>

<div id="div1">
    <ol id="fruits"></ol>
</div>

<h1>Basket:</h1

<ol id="basket"></ol>
<button>add fruit</button>
</body>
</html>

JS：

    var fruitslist = ["pear", "apple", "peach", "grapes", "strawberry", "melon"];
$( document ).ready(function() {

$.each(fruitslist, function(){
    $("<li>").text(this).appendTo("#fruits");
});


$('button').click(function () {
    var ipt = $("#newfruit").val();
    if(fruitslist.indexOf(ipt) > -1){
        $("<li>").text(ipt).appendTo("#basket");
        fruitslist = $.grep(fruitslist, function(value){
            return value != ipt;
        });
        $("#fruits > li").filter(function(){
            return $(this).text() === ipt;
        }).remove();
    }
});
});

Answer 1

有三件事需要注意：

必须在您的网页上加载jQuery。像这样：
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
jQuery lib位置必须在脚本之前加载。
您的代码必须使用$(function (){})包装，或者在加载DOM后加载代码。

Answer 2

在您自己的脚本之前，您没有在头部链接的JQuery框架（依赖项）：

http://puu.sh/bDukO.PNG

将此行直接添加到head标记下方和您自己的脚本之前的html代码中：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

注意您不再需要HTML5中的脚本代码中的'type'属性

Answer 3

您的示例代码中有一个开放标记。

您的示例代码（仅限第21行）：

<h1>Basket:</h1

应该是

<h1>Basket:</h1>

它在JSFiddle示例中显示为已关闭。希望有所帮助。

为什么我的jQuery代码可以在jsfiddle上运行但不能在Dreamweaver或浏览器上运行？

3 个答案: