Essayer de changer img src via le commutateur

Question

J'ai trois images sur ma page et je veux les afficher en superposition classique si elles sont cliquées. J'ai eu des problèmes avec la modification de la source de l'image en superposition.

Je stocke d'abord l'index d'image dans la variable et j'essaye de changer la source par l'intermédiaire de qui chcecking l'index d'image.

Mais d'une manière ou d'une autre cela ne fonctionne pas et je voudrais vous demander pourquoi, qu'est-ce que je fais mal?

Merci.

$("#imageholder img").click(function(){ //checking if was clicked on img from #imageholder 
var imageId = $("#imageholder img").index(this); //store imageID of cliced image into variable 
alert(imageId); // alert imageId (debugging) 
var overlayImage = $("#overlay-image"); 
// Adding img elements to overlay div based on imageId 
switch (imageId) { 
    case "0": 
    overlayImage.src='img/1.jpg'; 
    break; 
    case "1": 
    overlayImage.src='img/2.jpg'; 
    break; 
    case "2": 
    overlayImage.src='img/3.jpg'; 
    break; 
    default: 
    alert("No imge was loaded"); 
} 
function on() { 
document.getElementById("overlay").style.display = "block"; 
} 

function off() { 
document.getElementById("overlay").style.display = "none"; 
} 

on(); 

}); 
}); 

Answer 1

Votre cas de commutation doit avoir une valeur entière car ils font référence à la valeur d'index de l'image et l'index sont de type entier afin changer

switch (imageId) { 
    case "0": 
    overlayImage.src='img/1.jpg'; 
    break; 
    case "1": 
    overlayImage.src='img/2.jpg'; 
    break; 
    case "2": 
    overlayImage.src='img/3.jpg'; 
    break; 
    default: 
    alert("No imge was loaded"); 
} 

à

switch (imageId) { 
    case 0: 
    overlayImage.src='img/1.jpg'; 
    break; 
    case 1: 
    overlayImage.src='img/2.jpg'; 
    break; 
    case 2: 
    overlayImage.src='img/3.jpg'; 
    break; 
    default: 
    alert("No imge was loaded"); 
}