Question

这实际上只是一个与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。 Ctrl W 查看标记/ 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。

Answer 1

将您的代码放入“准备好”的处理程序中：

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

jsfiddle网站会为你做这件事，除非你告诉它不要。在左侧，您选择图书馆的位置下方看到选择下拉列表，其中显示“onLoad”？这意味着jsfiddle将JavaScript包装在窗口的“加载”处理程序中。我建议的是类似的（关于DOM就绪的jsfiddle选项）。您在代码中获得的内容相当于“No wrap-in <head>”，如果您选择该设置并尝试使用小提琴，则无法使用。

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

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

1 个答案: