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（）。