JQuery将图像添加到Div

Question

我试图为jQuery创建插件，但存在问题。

这是html的： http://pastebin.com/amLSFSZX

，这是.js文件： http://pastebin.com/CmrHzKRk

我想在一个div 4个箭头。

1. 顶部中部
2. 右中
3. 底部中间
4. 左中

如果它不是在一个插件装它工作正常。

但是，如果我包含插件，它会出现问题。

这是通过Firebug的输出：

<img class="arrows" src="arrow-top.png" alt="Arrow-Top" style="height: 26px; width: 20px; top: 50px; left: 480480px; position: absolute; display: none;"> 
<img class="arrows" src="arrow-right.png" alt="Arrow-Top" style="position: absolute; display: none;"> 
<img class="arrows" src="arrow-bottom.png" alt="Arrow-Top" style="left: 480480px; position: absolute; display: none;"> 
<img class="arrows" src="arrow-left.png" alt="Arrow-Top" style="height: 20px; width: 26px; top: 50250px; left: 480px; position: absolute; display: none;"> 

谁能帮助？对不起，我的英语不好。

Answer 1

它可能只是一个复制/粘贴或其他错误，但你的内联样式输出的萤火虫在几个地方看起来很奇怪。

您在两个地方有left: 480480px;和top: 50250px。你还没有解释到底发生了什么，或者它所期望的行为超出了“它的错误”。

关于你的jsfiddle，感谢把这些资源拉到一起，但是当我第一次执行它时，已经有两个错误出现在我的开发工具中。 arrow.js未找到，您无法在#map上调用方法AddArrow。您可能正在使用jQuery，因此您需要在窗口的左侧选择它作为框架。

但我认为这些奇怪的左边和顶部方面可能导致您所指的bugs。

编辑：它看起来像你的问题是，你是包括arrow.js插件，但然后自己覆盖它。乍一看，arrow.js和您的javascripting区域中的代码看起来完全相同。 （当然，他们都共享没有在你的计算括号的问题！）

我已删除依托于我的小提琴arrow.js，我想你应该太因为你显然复制的代码进入你的标记。如果你不能控制arrow.js，那么你使用自己的代码应该是，因为arrow.js是有缺陷当它没有在顶部和左边的计算周围放置括号。

以下是updated fiddle，其中基本箭头取自较大的Internet（因为我无法访问您的箭头）。停止依靠arrow.js;正如我所描述的那样纠正它，你将会处在一个更好的地方。当你包含插件的时候，为什么一切都会中断的问题的答案是该插件是错误的。

您将需要调整代码以在您的上下文中正确执行代码。例如：jsfiddle为你启动$（document）.ready（）。