jquery - 尝试通过 switch 更改 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 case 必须具有整数值，因为它们引用图像的索引值，并且索引是整数类型，因此请更改

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