Javascript代码工作在jsfiddle而不是在浏览器
我试图寻找类似的问题，但一直没能find我的代码工作在jfiddle而不是在浏览器中的原因。 我也尝试了从jfiddle到另一个小提琴项目的代码副本，并在新项目中的代码不起作用。 你可以在这里find我的项目 。 我正在做一个互动的食品游戏，有人挑选一个食品，例如橡子壁球，然后用户可以拖动图像。
我的第一个尝试是在代码中粘贴代码。
<script language="JavaScript"> code </script> 我是否需要onpage载入事件？ JavaScript是否需要放在一个函数？ 我是否使用jfiddle框架中没有在我需要调用的本地主机上使用的东西？
下面是我没有额外的食物选项使用的代码
var stage, layer; var sources = { plate: 'wp-content/uploads/2014/03/plate1.jpg', acornsquash: 'wp-content/uploads/2014/03/acorn-squash.png', }; loadImages(sources, initStage); function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); images[src].onload = function () { if (++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } } function initStage(images) { stage = new Kinetic.Stage({ container: 'container', width: 936, height: 550 }); layer = new Kinetic.Layer(); stage.add(layer); // plate var plateImg = new Kinetic.Image({ image: images.plate, x: 218, y: 20, width: 503, hei4ht: 502, draggable: false, visible: true }); layer.add(plateImg); // acornsquash var acornsquashImg = new Kinetic.Image({ id: "acornsquash", image: images.acornsquash, x: 50, y: 20, width: 134, height: 114, draggable: true, stroke: 'orange', strokeWidth: 5, strokeEnabled: false, visible: false }); layer.add(acornsquashImg); layer.draw(); $(".food").click(function () { var node = stage.find("#" + $(this).attr("id")); node.show(); layer.draw(); console.log($(this).attr("id")); }); document.getElementById('hide').addEventListener('click', function () { acornsquashImg.hide(); layer.draw(); }, false); }
通常的原因是你把你的代码放在它所操作的元素的上面 ，而不是使用onload或“ready”事件来延迟代码。 jsFiddle的默认设置是将JavaScript放入一个onload处理程序中，这个处理程序会将其延迟到页面加载过程中非常晚的时候。
基本上，在你的代码可以用页面上的元素做某件事之前，元素必须存在。 为了存在，浏览器必须为它处理HTML。 所以这失败了：
<html> <head> <script> // FAILS document.getElementById("foo").style.color = "green"; </script> </head> <body> <div id="foo">This is foo</div> </body> </html>
但是这个工作：
<html> <head> </head> <body> <div id="foo">This is foo</div> <script> // Works document.getElementById("foo").style.color = "green"; </script> </body> </html>
我是否需要onpage载入事件？
几乎肯定不是。
JavaScript是否需要放在一个函数？
不必要。 你所做的就是把script标签放在HTML的最后面，就在closures</body>标签之前。
将jQuery库包含在文档头部分
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head>
然后将自定义脚本包装在脚本标记和文档准备function之间
<script> $(function() { ...your custom scripts... }); </script>
就在</body>标签之前。
