试图通过开关更改img src

Question

我的页面上有三个图像，如果单击它们，我想在经典叠加中显示它们。我在覆盖图中改变图像源时遇到问题。

我首先将图像索引存储在变量中，并试图通过切换图像索引来改变源码。

但不知何故，它不起作用，我想问你为什么，我做错了什么？

谢谢。

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

你的开关情况下，它们在引用图像和索引的索引值是整数类型，以便改变

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