document.getElementById (''). Src == ??? (Jest równa FAIL)

Question

Moja JavaScript jest

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'); } } 

i mój HTML jest

<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> 

zawsze dotrzesz Fail po kliknięciu na zdjęcie. Muszę zabraknąć czegoś naprawdę elementarnego.

Answer 1

Niektóre przeglądarki przekształcić img SRC do pełnego adresu URL (wraz http://www....)

try ostrzegająca go, aby upewnić ..

można użyć

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

który sprawdza, czy jeden ciąg jest zawarty w drugim.

Answer 2

Czy jesteś pewien, że DOM został zbudowany po załadowaniu skryptu?

Answer 3

Ciąg znaków document.getElementById (imgID) .src. Może to być pełna ścieżka, tj. Zawierająca nazwę hosta, podczas gdy porównywany ciąg ma ścieżkę względną.

Answer 4

Dzieje się tak, ponieważ atrybut src został zmieniony przez przeglądarkę. Nie rób tego w ten sposób, właściwego sposobu sprawdzania i zmieniania atrybutu css class lub style.

Answer 5

Próbowałem twój kod na moim własnym serwerze.

Wynik:

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

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

baseurl wydaje się pokazać tylko względny adres URL. Jest to powód, dla którego "Fail" zostaje ostrzeżony.

Answer 6

Pola wyboru oparte na obrazie są dość powszechne, ale tutaj jest pełne rozwiązanie.

1) Najpierw renderuj rzeczywiste pola wyboru. Działają one w przypadku 100% przeglądarek.

2) Po załadowaniu strony, umieść „pole obrazu” obok pola wyboru i ukryć pole

3), gdy obraz jest kliknięciu przełączyć wyboru i korzystania z ukrytą opcję, aby ustalić stan Obraz.

Gdy formularz jest POST-ed, pola wyboru będą działać jak zwykłe pola wyboru. Jeśli JavaScript jest wyłączony lub w inny sposób niedostępny, formularz jest nadal użyteczny.

Answer 7

spróbować z następującego kodu:

<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> 

Różnice z kodem:

• przechodzące odniesienie IMG: this zamiast identyfikatora w funkcji onclick
• użytku indexOf zamiast ==, dla ścieżek względnych