显示/隐藏图片的JavaScript

首先我会给你我的密码

这是我的HTML代码，这是我的CSS

.hide{
显示：无；
}
.表演{
显示：块
}

因此，我的想法是，当我点击给定的列表元素——要显示的对应图片——我成功地做到了这一点

---

我的问题是，当有超过2张图片已经打开时，我的代码会自动关闭其中一张已经打开的图片

var simon=document.getElementById（“simon”）
var bruce=document.getElementById（“bruce”）
var ben=document.getElementById（“ben”）
simon.addEventListener（“单击”，显示）
bruce.addEventListener（“单击”，显示）
ben.addEventListener（“单击”，显示）
函数show（）{
让images=document.queryselectoral（“img”）
/*Array.prototype.forEach.call（图像，函数（x）{
x、 className=“隐藏”
})*/
设id=this.attributes[“数据img”].value
让imgId=document.getElementById（id）
if（imgId.className==“隐藏”）{
imgId.className=“显示”
}否则{
imgId.className=“隐藏”
}
//直到这里一切都好
让类=document.queryselectoral（“.show”）
让满=[]
Array.prototype.forEach.call（类，函数（x）{
全推（x）
})
/*for（设i=0；i=2）{
完整[1]。className=“隐藏”
全班
console.log（完整[0].id）
}
}

这段代码可以工作（某种程度上）-但是在成功运行了几轮之后-它停止工作了-就像我无法打开第三张图片并因此关闭现有图片中的一张一样

好的，首先你的show（）方法在我的计算机上工作得很好。我所做的唯一更改是获取img元素并在window.onload函数中分配eventListener，以避免获取未定义值的风险

var simon;
var bruce;
var ben;

window.onload = function(){
simon = document.getElementById("simon")
bruce = document.getElementById("bruce")
ben = document.getElementById("ben")

simon.addEventListener("click", show)
bruce.addEventListener("click", show)
ben.addEventListener("click", show)
}

---

这是一个简单的解决方案，因为元素上已经有了数据属性。这适用于es5。如果你愿意，你可以在es6中做一些更有趣的事情

var elements=document.getElementsByClassName（'imageHideShow'）；
对于（var i=0；i

.hide{
显示：无；
}
.表演{
显示：块
}

您可以尝试以下方法：

逻辑：

• 创建一个变量，用于保存可见图像的列表
• 单击

  a

  ，从数据属性中获取必要的元素id
• 现在检查当前列表中是否存在此项。如果没有，则将其添加到顶部
• 现在检查长度是否大于

  2

  ，弹出最后一个元素并隐藏此图像

注意：我正在使用

unshift

添加和

pop

删除。这是为了创建一个类似堆栈的结构。您可以交替使用

.push

添加，也可以使用

.splice（0,1）

删除

var visibleImages=[]；
函数registerEvents（）{
var els=document.querySelectorAll（'li a'）；
对于（变量i=0；i2）
hideImage（visibleImages.pop（））
}
函数showImage（id）{
document.getElementById（id）.classList.remove（'hide'）；
}
函数hideImage（id）{
document.getElementById（id）.classList.add（'hide'）；
}
registerEvents（）
.hide{
显示：无；
}
.表演{
显示：块
}
img{
边框：1px纯黑；
宽度：100px；
高度：100px；
}





图像和列表的html在哪里？如果您不熟悉javascript，请使用
var
而不是
来避免范围confusion@Vivick此评论与问题/问题有何关联？另一个想法是当我打开两张以上的图片时——其中一张要关闭，另一张要显示。这同样有效——但试着做两次。例如-打开前两张图片，然后打开第三张图片-这次可以了！但是试着打开第一张/第二张-在那一刻，它不起作用。我的问题是，当有两张以上的图片已经打开时，我的代码会自动关闭其中一张已经打开的图片。请注意
图标。您可以添加HTML/CSS/JS代码并使其可执行。非常感谢！非常感谢你！！