第一个html将包含一个图像幻灯片，用户将从中选择一个点击。然后，用户将被重定向到下一个html中，其中将显示所选图像。
这是我的html javascript代码，其中图像将被选中
var whichImages;
function displayImage(){
document.getElementsByClassName("image").onclick = whichImages;
return whichImages.join('');
}
sessionStorage.setItem(whichImages);
这是我的javascript代码的html，其中所选的图像将显示
var mainChar = sessionStorage.getItem(whichImages);
function showImage2(){
document.getElementById("img") = mainChar;
}
showImage2();
我认为这是你想要的行为。我把它改成了localStorage，这样如果你打开一个新的选项卡，它就可以使用了。
select_images.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<a href="see_images.html"> See selected images </a>
</div>
<img
src="https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg?auto=compress&cs=tinysrgb&w=400"
alt=""
/>
<img
src="https://images.pexels.com/photos/4043324/pexels-photo-4043324.jpeg?auto=compress&cs=tinysrgb&w=400"
alt=""
/>
<img
src="https://images.pexels.com/photos/7003188/pexels-photo-7003188.jpeg?auto=compress&cs=tinysrgb&w=400"
alt=""
/>
<img
src="https://images.pexels.com/photos/6765585/pexels-photo-6765585.jpeg?auto=compress&cs=tinysrgb&w=400"
alt=""
/>
<script>
//initializing with an empty array
if (!localStorage.getItem("images")) {
localStorage.setItem("images", JSON.stringify([]));
}
//changed to local storage for it to work when opening a new tab
//look in the local storage to see which images are saved, to apply the border to them (if page is refreshed)
JSON.parse(localStorage.getItem("images"))?.forEach((url) => {
document.querySelectorAll("img").forEach((img) => {
if (img.src == url) {
img.style.border = "10px solid green";
}
});
});
//bind the click event on each img, if the img exists it will remove, if it doesn't exists, add it
document.querySelectorAll("img").forEach((img) => {
img.addEventListener("click", (e) => {
let imgSrcs = JSON.parse(localStorage.getItem("images"));
const currentImgSrc = e.currentTarget.src;
if (imgSrcs.includes(currentImgSrc)) {
const filtered = imgSrcs.filter((img) => img !== currentImgSrc);
localStorage.setItem("images", JSON.stringify(filtered));
e.currentTarget.style.border = "none";
return;
}
imgSrcs.push(currentImgSrc);
localStorage.setItem("images", JSON.stringify(imgSrcs));
e.currentTarget.style.border = "10px solid green";
});
});
</script>
</body>
</html>
see_images.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<a href="select_images.html"> Select Images </a>
</div>
<script>
if (localStorage.getItem("images")) {
const imgSrcs = JSON.parse(localStorage.getItem("images"));
if (imgSrcs.length === 0) {
document.body.append("No images selected");
}
imgSrcs.forEach((url) => {
if (url) {
const img = document.createElement("img");
img.src = url;
document.body.append(img);
}
});
} else {
document.body.append("No images selected");
}
</script>
</body>
</html>