Javascript 单击一个元素并将一个类添加到另一个节点列表中具有相同索引的不同元素的元素中

我有两组相同的图像。 画廊在哪 另一个是显示的图像列表：无；直到单击相应的图像。 （基本上是一个灯箱）

例如：

我在图库中循环了图像，并为每个img添加了一个偶数侦听器

当我使用document.getElementsByClassName并返回节点列表时，这些图像在两个列表中的顺序相同，并且具有相同的索引。（两者都有不同的变量名。例如galleryImage[0]和modalImage[0]） 在使用节点列表单击“库图像”时，是否有方法将类添加到相应的“模式图像”中？ 基本上，当galleryImage[0]关闭时，我想向modalImage[0]添加一个类

有没有办法做到这一点？采取什么方法

我已经找到了一些例子，并得到了“答案”，但到目前为止，所有这些都包括为每个图像分配一个带有索引号的id，并且更希望所有的js都放在一个文件中，保持整洁，并学习如何使用节点列表

如果有人能解释他们的答案，以理解其背后的逻辑，而不是“答案”，也将不胜感激

---

提前感谢

在我看来，您的问题可以归结为：“给定对DOM元素的引用，如何确定其在节点列表中的索引？”因为一旦有了索引，关于在另一个列表中获取相应元素的第二部分就很简单了

因此，您可以使用查找数组中某项的索引，也可以通过在节点列表上使用该方法：

var index = Array.prototype.indexOf.call(galleryImages, elementToFind)

…之后，

index

将是您要查找的元素的索引。（如果没有找到，则为-1，但在您的情况下，您知道它会被找到。）因此，

modalImages[index]

是另一个列表中的对应项

另外，这不是您要问的，而是我将单个处理程序绑定到包含UL元素，并在该处理程序中测试

event.target

以查看它是否是IMG元素，而不是将click处理程序绑定到循环中的每个图像。这被称为委托事件处理：单击元素上的事件通过其包含的元素“冒泡”，因此单击任何gallery IMG元素都可以在UL级别进行处理

出于演示目的，单击我将指定一个

选定的

类，该类使相应的项变为黄色（并删除以前的任何选择）

//获取对UL元素的引用：
var galleryContainer=document.getElementById（“画廊”）
var modalContainer=document.getElementById（“模态”）
//获取IMG元素的列表：
var gallerymages=galleryContainer.queryselectoral（“.gallery image”）
var modalImages=modalContainer.querySelectorAll（“.modal image”）
//将单击处理程序绑定到gallery UL：
galleryContainer.addEventListener（“单击”），函数（事件）{
//如果点击的目标不是我们关心的元素，那么立即返回即可
if（event.target.tagName.toLowerCase（）！=“img”）
回来
//检查当前选定的元素，如果该元素存在，则从中删除该类
var currentSelected=document.querySelector（“.selected”）
如果（当前选定）
currentSelected.classList.remove（“selected”）
//在列表中找到当前IMG的索引，并使用该索引
//获取其他列表中的对应项
var index=Array.prototype.indexOf.call（galleryImages，event.target）
modalImages[index].classList.add（“已选”）
});
。所选{背景色：黄色；}










var index = Array.prototype.indexOf.call(galleryImages, elementToFind)