提问人：Frejr 提问时间：10/16/2023 最后编辑：Mark SchultheissFrejr 更新时间：10/16/2023 访问量：69
单独显示/隐藏多个图像
Show/hide multiple images individually
问：
我正在尝试在可以显示和隐藏图像的位置进行切换。我从几年前找到了一个仅适用于一张图像的答案。当我添加另一个按钮和图像时，所有按钮都只控制第一个图像。我该如何做到可以单独显示/隐藏它们？
几乎所有其他问题都询问在切换时同时显示多个部分，但我需要它们具有单独的按钮。
我尝试使用图像类，但这只会完全破坏它。当我这样做时，图像不再被隐藏。
这是我所拥有的代码笔：https://codepen.io/thepasteldyke/pen/vYvwwGo
这是我得到代码的问题：制作一个按钮，在单击时显示隐藏图像 具体的答案是用户 Lucas 的答案。
function toggleImage(){
document.querySelector('#image').classList.toggle('hidden');
}.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>
<img src="https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" id="image" class="hidden w-100"/>
<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>
<img src="https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGlua3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" id="image" class="hidden w-100"/>答：
2赞
Ronak Golakiya
10/16/2023
#1
您遇到的问题源于对多个元素使用相同的 ID。在 HTML 中，ID 应该是唯一的，这意味着每个 ID 只能分配给一个元素。使用 document.querySelector（'#image'） 时，它仅选择具有该特定 ID 的第一个元素，这就是仅影响第一个图像的原因。
<!DOCTYPE html>
<html>
<head>
<style>
.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}
</style>
<script>
function toggleImage(imageId){
document.querySelector('#'+imageId).classList.toggle('hidden');
}
</script>
</head>
<body>
<button onClick="toggleImage('image1')" class="w-100 mb-10">Show/Hide</button>
<img src="https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" id="image1" class="hidden w-100"/>
<button onClick="toggleImage('image2')" class="w-100 mb-10">Show/Hide</button>
<img src="https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGlua3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" id="image2" class="hidden w-100"/>
</body>
</html>
评论
0赞
Frejr
10/16/2023
谢谢，我也尝试更改了 id，但由于我真的不知道如何 js，我错误地更改了 java，所以我想我的猜测是半正确的，我必须让它们不同，我只是没有正确地做到这一点。谢谢你！=D
0赞
LS_
10/16/2023
#2
不能有相同值的 ID。对于通用解决方案，您可以检索所有按钮，应用 onClick 侦听器，并在 DOM 中单击的按钮旁边获取图像。
像这样：
const buttons = document.querySelectorAll("button");
buttons.forEach((button, index) => {
button.addEventListener("click", function () {
const image = button.nextElementSibling;
if (image && image.tagName === "IMG") {
image.classList.toggle("hidden");
}
});
});.hidden{
display: none;
}
.w-100{
width: 100%;
}
.mb-10{
margin-bottom: 10px;
}<button class="w-100 mb-10">Show/Hide</button>
<img src="https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" id="image" class="hidden w-100"/>
<button class="w-100 mb-10">Show/Hide</button>
<img src="https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGlua3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" id="image" class="hidden w-100"/>
评论
id="image"