document.getElementById (''). Src == ??? (Est égal à FAIL)

Mon javascript estdocument.getElementById (''). Src == ??? (Est égal à 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'); } }

et mon HTML est

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

Je reçois toujours échouer lorsque vous cliquez sur l'image. Il me manque quelque chose de vraiment élémentaire.

Source

2010-10-19 jsejcksn

Certains navigateurs convertissent le img src à l'URL complète (y compris http://www....)

essayer alerte pour vous assurer ..

Vous pouvez utiliser le

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

qui vérifie si une chaîne est contenu dans l'autre ..

Source

2010-10-19 07:35:15

Exact tly. Y a-t-il un moyen d'éviter ce comportement? – jsejcksn

@pattern, pas vraiment. C'est la façon dont le navigateur représente les chemins d'URL en interne. Nous ne pouvons que contourner le problème. –

Etes-vous sûr que le DOM est construit lorsque le script est chargé?

Source

2010-10-19 07:31:40 MatTheCat

Chaîne d'alerte document.getElementById (imgID) .src. Il peut prendre un chemin complet, c'est-à-dire inclure le nom de l'hôte, tandis que la chaîne que vous comparez a un chemin relatif.

Source

2010-10-19 07:33:39

C'est parce que l'attribut src est modifié par le navigateur. Ne le faites pas de cette façon, la bonne façon de vérifier et de modifier la classe CSS ou l'attribut de style à la place.

Source

2010-10-19 07:38:28 Manny

J'ai essayé votre code sur mon propre serveur.

Résultat:

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

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

baseurl semble montrer la seule URL relative. C'est la raison pour laquelle "Fail" est alerté.

Source

2010-10-19 07:40:47 Thariama

Je vous conseille également d'utiliser des sprites lorsque vous devez échanger des images (bien que vous utilisiez un élément dans ce cas). Ensuite, il vous suffit de changer le décalage de l'image. –

Les cases à cocher basées sur l'image sont assez courantes, mais voici la solution complète.

1) Rendez les cases à cocher réelles en premier. Cela fonctionne pour 100% des navigateurs.

2) Lorsque la page se charge, placez votre « case d'image » à côté de la case à cocher et cacher la case

3) Lorsque l'image est cliqué, activez la case à cocher et utilisez la case cachée pour vérifier l'état de l'image.

Lorsque le formulaire est POST-ed, les cases à cocher agissent comme des cases à cocher normales. Si JavaScript est désactivé ou non disponible, le formulaire est toujours utilisable.

Source

2010-10-19 07:43:44 Fenton

Essayez avec le code suivant:

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

Les différences avec votre code:

passant la référence img: this au lieu de l'ID dans la fonction onclick
utilisation indexOf au lieu de ==, pour les chemins relatifs

Source

2010-10-19 07:55:00 Mic

document.getElementById (''). Src == ??? (Est égal à FAIL)

Répondre

Questions connexes