Question

我的页面上有三张图片，如果点击它们，我想以经典叠加方式显示它们。我在改变叠加图像来源方面遇到了问题。

我首先将图像索引存储在变量中，然后尝试通过swich更改源，这是chcecking图像索引。

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

感谢。

$("#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必须有整数值，因为它们引用了image的索引值而index是整数类型所以改变

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

试图通过开关更改img src

1 个答案: