document.getElementById (''). Src == ??? (Es igual a FAIL)

Mi JavaScript esdocument.getElementById (''). Src == ??? (Es igual a FAIL)

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

y mi HTML es

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

siempre me fallan al hacer clic en la imagen. Debo extrañar algo realmente elemental.

Fuente

2010-10-19 jsejcksn

Algunos navegadores convierten la src img a la URL completa (incluyendo http://www....)

intento de alerta para asegurarse ..

podría utilizar el

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

que comprueba si una cadena está contenido en el otro ..

Fuente

2010-10-19 07:35:15

Eso fue todo Tly. ¿Hay alguna forma de evitar este comportamiento? – jsejcksn

@pattern, no realmente. Es la forma en que el navegador representa las rutas url internamente. Solo podemos evitarlo ... –

¿Estás seguro de que el DOM se genera cuando se carga el script?

Fuente

2010-10-19 07:31:40 MatTheCat

Cadena de alerta document.getElementById (imgID) .src. Puede estar tomando la ruta completa, es decir, incluido el nombre del host, mientras que la cadena con la que compara tiene una ruta relativa.

Fuente

2010-10-19 07:33:39

Se debe a que el navegador cambia el atributo src. No lo haga de esa manera, la forma correcta de verificar y cambiar la clase css o el atributo de estilo en su lugar.

Fuente

2010-10-19 07:38:28 Manny

Probé tu código en mi propio servidor.

Resultado:

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

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

baseurl parece mostrar la dirección URL relativa solamente. Así que esa es la razón por la cual "Fail" recibe una alerta.

Fuente

2010-10-19 07:40:47 Thariama

También recomendaría usar sprites cuando tenga que intercambiar imágenes (aunque en este caso está utilizando un elemento ). Luego, simplemente cambia el desplazamiento de la imagen. –

Las casillas de verificación basadas en imágenes son bastante comunes, pero aquí está la solución completa.

1) Primero renderice las casillas de verificación reales. Estos funcionan para el 100% de los navegadores.

2) Cuando se carga la página, coloque su "casilla de verificación de imagen" al lado de la casilla de verificación y ocultar la casilla

3) Cuando se hace clic en la imagen, activar y desactivar la casilla de verificación y utilice la casilla oculto para determinar el estado de la imagen.

Cuando se envía el formulario POST-ed, las casillas de verificación actuarán como casillas de verificación normales. Si JavaScript está desactivado o no está disponible, el formulario aún se puede usar.

Fuente

2010-10-19 07:43:44 Fenton

intento con el siguiente código:

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

Las diferencias con su código:

que pasan a la IMG de referencia: this lugar del ello en la función onclick
uso indexOf en lugar de ==, para rutas relativas

Fuente

2010-10-19 07:55:00 Mic

document.getElementById (''). Src == ??? (Es igual a FAIL)

Respuesta

Cuestiones relacionadas