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

Question

我有两套相同的图片。 1是画廊另一个是显示的图像列表：none；直到点击对应的图片。（本质上是一个灯箱）

例如：

<ul id="gallery">
    <li><img class="gallery-image" src="dog"></li>
    <li><img class="gallery-image" src="cat"></li>
    <li><img class="gallery-image" src="rabbit"></li>
</ul>

<ul id="modal">
    <li><img class="modal-image" src="dog"></li>
    <li><img class="modal-image" src="cat"></li>
    <li><img class="modal-image" src="rabbit"></li>
</ul>

我循环浏览了画廊中的图像，并为每个图像添加了一个均匀的听众。

当我使用 document.getElementsByClassName 并返回节点列表时，这些图像在两个列表中的顺序相同并且具有相同的索引。（两者都有不同的变量名。例如 galleryImage[0] 和 modalImage[0]）有没有办法在使用节点列表单击"gallery-image"时将class添加到相应的"modal-image"？基本上当 galleryImage[0] 关闭时我想添加一个 class 到 modalImage[0].

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

我找到了示例并给出了 "answers" 但到目前为止，所有示例都包括为每个图像分配一个带有索引号的 ID，并且希望将所有 js 放在一个文件中并保持整洁了解如何使用节点列表。

如果有人可以解释他们的答案以理解其背后的逻辑而不是 "answer"

，我们将不胜感激

提前致谢

Answer 1

在我看来，您的问题可以归结为："Given a reference to a DOM element, how can I determine its index in a NodeList?" 因为一旦您有了索引，关于在另一个列表中获取相应元素的第二部分就很简单了。

因此您可以使用 array .indexOf() method to find the index of an item within an array, or via .call() 您可以在 NodeList 上使用该方法：

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

...之后 index 将是您要查找的元素的索引。（或者 -1 如果没有找到，但在你的情况下你知道它会被发现。）所以 modalImages[index] 是另一个列表中的相应项目。

此外，不是您要问的，而是将点击处理程序绑定到循环中的每个图像，我会将单个处理程序绑定到包含的 UL 元素，并在该处理程序中测试 event.target 看看它是否是 IMG 元素。这称为委托事件处理：通过元素的包含元素单击元素 "bubble up" 上的事件，因此可以在 UL 级别处理对任何图库 IMG 元素的单击。

出于演示目的，我在点击时分配了一个 selected class，使相应的项目变为黄色（并删除了之前的所有选择）。

// Get references to the UL elements:
var galleryContainer = document.getElementById("gallery")
var modalContainer = document.getElementById("modal")

// Get the lists of IMG elements:
var galleryImages = galleryContainer.querySelectorAll(".gallery-image")
var modalImages = modalContainer.querySelectorAll(".modal-image")

// Bind click handler to gallery UL:
galleryContainer.addEventListener("click", function(event) {
  // If the target of the click wasn't an element we care about just return immediately
  if (event.target.tagName.toLowerCase() != "img") 
    return
  
  // Check for a current .selected element, and if it exists remove the class from it
  var currentSelected = document.querySelector(".selected")
  if (currentSelected)
    currentSelected.classList.remove("selected")
  
  // Find the index of the current IMG in the list, and use that index
  // to get the corresponding item in the other list
  var index = Array.prototype.indexOf.call(galleryImages, event.target)
  modalImages[index].classList.add("selected")
});

.selected { background-color: yellow; }

<ul id="gallery">
    <li><img class="gallery-image" src="dog" alt="dog"></li>
    <li><img class="gallery-image" src="cat" alt="cat"></li>
    <li><img class="gallery-image" src="rabbit" alt="rabbit"></li>
</ul>
<ul id="modal">
    <li><img class="modal-image" src="dog" alt="dog"></li>
    <li><img class="modal-image" src="cat" alt="cat"></li>
    <li><img class="modal-image" src="rabbit" alt="rabbit"></li>
</ul>

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

Clicking an element and adding a class to an element to a different element which has the same index in another node list

javascript

events

nodelist