ImageMapper Beatles演示不会在jsFiddle之外运行 [英] ImageMapper Beatles demo won't run outside jsFiddle
问题描述
这实际上只是一个与ImageMapper jQuery插件括号相关的javascript问题。
This is really just a javascript question that is parenthetically related to the ImageMapper jQuery plugin.
我必须重新询问这个问题由于问题构建不良以及OP的反应不明确而被关闭。但是，我遇到了同样的问题，需要帮助。
I must re-ask this question which was closed due to poor question construction and unclear responses from OP. However, I am having identical problem and need assistance.
与之前的OP一样，我试图重现这个jsfiddle： http://jsfiddle.net/nYkAG/396/ ，但javascript无法运行。
Like the previous OP, I am attempting to reproduce this jsfiddle: http://jsfiddle.net/nYkAG/396/, but the javascript won't run.
OP链接到她尝试使其正常工作，我的相同。 Ctrl W 查看标记/ javascript。很明显，我们都错过了一些东西（可能是因为类似的新手因素）。它可能是左侧面板中jsfiddle中引用的onLoad（）函数吗？
The OP links to her attempt to make it work and mine is identical. CtrlW to see the markup/javascript. Clearly we both missed something (probably due to a similar newbie factor). Could it be the onLoad() function referenced in the jsfiddle on the left-side panel?
我添加了一个简单的jQuery测试，它可以工作：
I added a simple jQuery test, and it works:
$(function() {
alert('Hi');
});
所以我知道库正在正确加载，代码中没有明显的错误。但是，我无法理解这些线条，并想知道是否有些东西丢失了？但是，它们在jsFiddle中工作..？
so I know the libraries are loading properly and there are no obvious errors in the code. However, I was unable to understand these lines and wonder if perhaps something is missing? However, they work in the 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的原始示例。
In any case, the example - as copy/pasted - does not work. What am I missing? Again, for complete javascript and markup, please see OP's original example.
推荐答案
将代码放入准备好的处理程序中：
Put your code in a "ready" handler:
$(function() {
// all of your current code here
});
jsfiddle网站会为你做这件事，除非你告诉它不要。在左侧，您选择图书馆的位置下方看到选择下拉列表，其中显示onLoad？这意味着jsfiddle将JavaScript包装在窗口的加载处理程序中。我建议的是类似的（关于DOM就绪的jsfiddle选项）。你在代码中得到的相当于没有换行< head> ，如果你选择那个设置并尝试你的小提琴，那就赢了工作。
The jsfiddle site does that for you, unless you tell it not to. See that selection pull-down on the left side, below where you choose your library, where it says "onLoad"? That means that jsfiddle wraps your JavaScript in a "load" handler for the window. What I'm suggesting is similar (the jsfiddle option "on DOM ready"). What you've got in your code is the equivalent of "No wrap - in <head>", and if you choose that setting and try your fiddle, it won't work.
这里发生的事情是，如果您的代码在HTML被解析为DOM之前运行，那么您对#beatles的搜索将一无所获。通过延迟事务直到DOM准备就绪，您可以确保代码找到所需的元素。
What's going on here is that if your code runs before the HTML is parsed into the DOM, your search for "#beatles" will find nothing. By delaying things until the DOM is ready, you ensure that the code will find the element(s) it needs.
这篇关于ImageMapper Beatles演示不会在jsFiddle之外运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
