JQuery将Image添加到Div

时间:2012-04-18 12:03:42

标签: javascript jquery html

我尝试为jQuery创建一个插件,但是有一个问题。

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

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

我想在div中使用4个箭头。

  1. Top Middle
  2. 右中间
  3. Bottom Middle
  4. 左中间
  5. 如果它没有打包在插件中,它可以正常工作。

    但如果我包含插件,则会出错。

    这是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;">
    

    有人可以帮忙吗?抱歉我的英语不好。

1 个答案:

答案 0 :(得分:1)

它可能只是一个复制/粘贴或其他错误,但是firebug输出的内联样式在一些地方看起来很奇怪。

您在两个地方left: 480480px; top: 50250px。你还没有准确地解释未发生的事情或者所谓的行为超出了“它的错误”。

关于你的jsfiddle,感谢你把这些资源放在一起,但是当我第一次执行run时,我的开发人员工具中已经出现了两个错误。找不到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()。