document.getElementById (''). Src == ??? (È uguale a fallire)

mio javascript èdocument.getElementById (''). Src == ??? (È uguale a fallire)

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

e il mio 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>

ottengo sempre falliscono quando cliccando sull'immagine. Mi manca qualcosa di veramente elementare.

fonte

2010-10-19 jsejcksn

Alcuni browser convertono l'img src per l'URL completo (compreso http://www....)

prova alerting per assicurarsi ..

è possibile utilizzare il

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

che controlla se una stringa è contenuto nell'altro ..

fonte

2010-10-19 07:35:15

Questo era esac tly. C'è un modo per evitare questo comportamento? – jsejcksn

@pattern, non proprio. È come il browser rappresenta i percorsi di url internamente .. Possiamo solo aggirarlo .. –

Sei sicuro che il DOM sia stato creato quando lo script è stato caricato?

fonte

2010-10-19 07:31:40 MatTheCat

Avviso stringa document.getElementById (imgID) .src. Potrebbe seguire un percorso completo, incluso il nome dell'host mentre la stringa con cui si sta confrontando ha un percorso relativo.

fonte

2010-10-19 07:33:39

È perché l'attributo src è cambiato dal browser. Non farlo in questo modo, il modo corretto per controllare e modificare la classe css o l'attributo di stile.

fonte

2010-10-19 07:38:28 Manny

Ho provato il codice sul mio server.

Risultato:

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

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

baseurl sembra mostrare solo l'URL relativo. Questo è il motivo per cui "Fail" viene avvisato.

fonte

2010-10-19 07:40:47 Thariama

Inoltre, consiglierei di usare gli sprite quando devi scambiare le immagini (anche se in questo caso stai usando un elemento ). Quindi devi solo modificare l'offset dell'immagine. –

Le caselle di controllo basate su immagini sono piuttosto comuni, ma questa è la soluzione completa.

1) Effettuare prima le caselle di controllo reali. Funzionano per il 100% dei browser.

2) Quando la pagina viene caricata, posizionare il "checkbox immagine" accanto alla casella di controllo e nascondere la casella di controllo

3) Quando l'immagine viene cliccato, attivare la casella di controllo e utilizzare la casella di controllo nascosto per accertare lo stato di l'immagine.

Quando il modulo è POST-ed, le caselle di controllo fungeranno da normali caselle di controllo. Se JavaScript è disabilitato o altrimenti non disponibile, il modulo è ancora utilizzabile.

fonte

2010-10-19 07:43:44 Fenton

Provare con il seguente codice:

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

Le differenze con il tuo codice:

che passano il riferimento img: this anziché l'id nella funzione onclick
uso indexOf invece di ==, per i percorsi relativi

fonte

2010-10-19 07:55:00 Mic

document.getElementById (''). Src == ??? (È uguale a fallire)

risposta

Problemi correlati