Question

我尝试过搜索类似的问题但是找不到我的代码在jfiddle中工作的原因，而不是在浏览器中。我也尝试将我的代码副本从jfiddle复制到另一个小提琴项目，代码在新项目中不起作用。你可以找到my project here。我正在制作一个互动食品游戏，有人选择食品，例如橡子壁球，然后用户可以拖动图像。

我的第一次尝试是将代码粘贴在头脑中。

<script language="JavaScript">
code
</script>

我是否需要onpage load事件？是否需要将javascript放入函数中？我是否使用了jfiddle框架中没有在我需要调用的本地主机上使用的东西？

以下是我使用的代码，没有额外的食物选项

var stage, layer;

var sources = {
    plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
    acornsquash: 'http://www.healncure.com/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);
}

Answer 1

通常的原因是，您将代码放在上面上运行的元素，而不是使用onload或＆＃34;＆＃34;来延迟代码＃34;事件。 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 load事件？

几乎肯定不会。

是否需要将javascript放入函数中？

不一定。您所做的是将script标记放在HTML的最末端，就在结束</body>标记之前。

Answer 2

在文档的head部分包含jQuery库

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

然后在脚本标记和文档就绪函数之间包装自定义脚本

<script>
  $(function() {

    ...your custom scripts...

  });
</script>

就在</body>标记之前。

Javascript代码适用于jsfiddle，但不适用于浏览器

2 个答案: