document.getElementById（''）。src == ??? （等於失敗）

我的JavaScriptdocument.getElementById（''）。src == ??? （等於失敗）

function changeImage(imgID) { 
var baseurl = "media/images/"; 
if (document.getElementById(imgID).src == baseurl+"selection-off.png") { 
    alert('Success'); 
    document.getElementById(imgID).src = baseurl+"selection-no.png"; } 
else { 
    alert('Fail'); } }

和我的HTML是

<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage('mustard-img')" /></div>

點擊圖像時，我總是失敗。我一定會錯過一些非常基本的東西。

來源

2010-10-19 jsejcksn

一些瀏覽器的img SRC轉換爲完整URL（包括http://www....）

嘗試提醒它，以確保..

您可以使用

document.getElementById(imgID).src.indexOf(baseurl+"selection-off.png") >= 0

用來檢查是否一個字符串包含在其他中。

來源

2010-10-19 07:35:15

這就是它exac TLY。有沒有辦法避免這種行爲？ – jsejcksn 2010-10-19 07:57:01

@pattern，不是真的。它是如何瀏覽器內部表示URL路徑..我們只能解決它.. – 2010-10-19 08:00:51

您確定DOM是在加載腳本時構建的嗎？

來源

2010-10-19 07:31:40 MatTheCat

警報字符串document.getElementById（imgID）.src。它可能會採取完整的路徑，即包括主機名，而您正在比較的字符串具有相對路徑。

來源

2010-10-19 07:33:39

這是因爲src屬性被瀏覽器更改。不要這樣做，而是檢查和更改css類或樣式屬性的正確方法。

來源

2010-10-19 07:38:28 Manny

我在自己的服務器上試過你的代碼。

結果：

document.getElementById(mustard-img).src是 'http://localhost/webfiles/media/images/selection-off.png'

baseurl+"selection-off.png"爲' media/images/selection-off.png「

的BaseURL似乎只顯示相對URL。所以這就是「失敗」得到提醒的原因。

來源

2010-10-19 07:40:47 Thariama

另外，我會建議使用精靈，當你必須交換圖像（雖然你在這種情況下使用元素）。然後你只需改變圖像的偏移量。 – 2010-10-19 07:46:04

基於圖像的複選框很常見，但這裏是完整的解決方案。

1）首先渲染實際的複選框。這些適用於100％的瀏覽器。

2）頁面加載時，將您的「形象複選框」旁邊的複選框和隱藏複選框

3）當點擊圖像，切換複選框，並使用隱藏複選框，以確定的狀態圖片。

當表單被POST-ed時，複選框將像正常複選框一樣工作。如果JavaScript被禁用或者不可用，表單仍然可用。

來源

2010-10-19 07:43:44 Fenton

嘗試用下面的代碼：

<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage(this)" /></div> 

<script> 
function changeImage(img) { 
    if (img.src.indexOf('selection-off.png')) { 
     alert('Success'); 
     img.src.replace(/selection-off.png/, 'selection-no.png'); 
    }else{ 
     alert('Fail'); 
    } 
} 
</script>

與您的代碼的差異：

傳遞IMG參考：this而不是ID在onclick功能
使用indexOf代替==，相對路徑

來源

2010-10-19 07:55:00 Mic

document.getElementById（''）。src == ??? （等於失敗）

回答

相關問題