Versuchen, img src über den Schalter

Question

zu ändern Ich habe drei Bilder auf meiner Seite und ich möchte sie im klassischen Overlay anzeigen, wenn sie angeklickt werden. Ich habe Probleme mit der Änderung der Quelle des Bildes im Overlay.

Ich speichere zuerst den Bildindex in Variable und ich versuche, die Quelle über swich zu ändern, die Bildindex Index ist.

Aber irgendwie funktioniert es nicht und ich möchte dich fragen warum, was mache ich falsch?

Danke.

$("#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

Ihr Switch Fall muss Integer-Wert haben, da sie den Indexwert des Bildes und Index referenzieren integer sind so

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

zu

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