为什么我的jQuery代码可以在jsfiddle上运行，但不能在Dreamweaver或浏览器上运行? [英] Why my jQuery code can run on jsfiddle but not on Dreamweaver or browser?
问题描述
我的jQuery代码可以在jsfiddle上运行，但不能在Dreamweaver或浏览器上运行吗? 这是我在JSfiddle上的代码的链接，下面是我的代码. 请帮助我检查是否缺少什么? http://jsfiddle.net/sbmp3apz/6/
My jQuery code can run on jsfiddle but not on Dreamweaver nor browser? Here is the link to my code on JSfiddle, and below is my codes. please help me check if there is something missing? 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();
}
});
});
推荐答案
需要注意三点:
-
必须在页面上加载jQuery.像这样:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
必须在脚本之前加载jQuery lib位置.
the jQuery lib position must load before your script.
您的代码必须用$(function (){})包装，否则您的代码将在DOM加载后加载.
your code must be wrapped used $(function (){}), or your code load after the DOM loaded.
这篇关于为什么我的jQuery代码可以在jsfiddle上运行，但不能在Dreamweaver或浏览器上运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
