ImageMapper Beatles演示不会在jsFiddle之外运行

这实际上只是一个javascript问题，与ImageMapper jQuery插件有关。ImageMapper Beatles演示不会在jsFiddle之外运行

我必须重新询问this question，由于问题构建不佳以及OP的回复不明确，该问题已关闭。但是，我有同样的问题，需要帮助。

像以前的OP，我试图重现这个jsfiddle：http://jsfiddle.net/nYkAG/396/，但JavaScript不会运行。

该链接至her attempt to make it work and mine is identical。 CtrlW看到标记/ javascript。显然，我们都错过了一些东西（可能是因为一个类似的新手因素）。它可能是左侧面板上的jsfiddle中引用的onLoad（）函数吗？

我添加了一个简单的jQuery测试，它的工作原理：

$(function() { 
    alert('Hi'); 
});

，所以我知道，这两个库正确加载并有代码中没有明显的错误。但是，我无法理解这些线条，并想知道是否缺少了什么？但是，他们在jsFiddle工作..？

var inArea, 
    map = $('#beatles'), 
    captions = { //stuff here }, 
    single_opts = { //stuff here }, 
    all_opts = { //stuff here }, 
    initial_opts = { //stuff here }; 
opts = $.extend({}, all_opts, initial_opts, single_opts);

无论如何，该示例 - 复制/粘贴 - 不起作用。我错过了什么？再次，对于完整的JavaScript和标记，请参阅OP's original example。

来源

2013-04-21 gibberish

您在正确的轨道上使用您写下的“alert（）”测试:-) – Pointy 2013-04-21 16:26:46

把你的代码在“准备就绪”的处理程序：

$(function() { 
    // all of your current code here 
});

该网站的jsfiddle不为你，除非你告诉它不要。看到左侧的选择下拉菜单，在你选择图书馆的地方下面，在哪里显示“onLoad”？这意味着jsfiddle将JavaScript封装在窗口的“加载”处理程序中。我所建议的是类似的（“准备好DOM的jsfiddle选项”）。你的代码中有什么相当于“没有换行 - 在<head>”，如果你选择这个设置并尝试你的小提琴，它将无法工作。

这里发生的事情是，如果您的代码在将HTML解析到DOM之前运行，那么您对“#beatles”的搜索将找不到任何内容。通过延迟东西直到DOM准备就绪，您确保代码将找到它所需的元素。

来源

2013-04-21 16:23:05 Pointy

谢谢您的明确解释。猜猜我没有理解js的构造，并没有尝试明显的。谢谢！ – gibberish 2013-04-21 16:30:43

ImageMapper Beatles演示不会在jsFiddle之外运行

回答

相关问题