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

【问题标题】：ImageMapper Beatles demo won't run outside jsFiddleImageMapper Beatles 演示不会在 jsFiddle 之外运行
【发布时间】：2026-01-21 10:10:01
【问题描述】：

这实际上只是一个与 ImageMapper jQuery 插件相关的 javascript 问题。

我必须重新询问this question，由于问题结构不佳和 OP 的回答不明确，该问题已关闭。但是，我遇到了同样的问题，需要帮助。

与之前的 OP 一样，我正在尝试重现此 jsfiddle：http://jsfiddle.net/nYkAG/396/，但 javascript 不会运行。

OP 链接到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。

【问题讨论】：

您编写的“alert()”测试走在了正确的轨道上 :-)

标签： javascript jquery imagemapster

【解决方案1】：

将您的代码放入“就绪”处理程序中：

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

jsfiddle 站点会为您执行此操作，除非您告诉它不要这样做。看到左侧的选择下拉菜单，在您选择库的下方，上面写着“onLoad”吗？这意味着 jsfiddle 将您的 JavaScript 包装在窗口的“加载”处理程序中。我的建议是相似的（jsfiddle 选项“在 DOM 就绪时”）。您的代码中的内容相当于“No wrap - in <head>”，如果您选择该设置并尝试使用您的小提琴，它将无法正常工作。

这里发生的情况是，如果您的代码在 HTML 被解析为 DOM 之前运行，那么您对“#beatles”的搜索将一无所获。通过将事情延迟到 DOM 准备就绪，您可以确保代码能够找到它需要的元素。

【讨论】：

感谢您的清晰解释。猜猜我因不了解 js 构造而挂断电话，也没有尝试显而易见的事情。谢谢！