Question

我有2套相同的图像。 1是画廊另一个是显示的图像列表：无;直到单击相应的图像。（基本上是一个灯箱）

例如：

<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>

我已经在图库中循环播放图像，并为每个img添加了一个均匀的监听器。

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

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

我找到了一些示例，并且已经给出了“答案”，但到目前为止所有这些都包括为每个图像分配一个带有索引编号的id，并且希望将所有js放在1个文件中并保持整洁并且还学习如何玩与节点列表。

如果有人能够解释他们的答案以理解其背后的逻辑而不是“回答”

，也会感激不尽

提前谢谢

Answer 1

在我看来，你的问题归结为：＆＃34;鉴于对DOM元素的引用，我如何在NodeList中确定其索引？＆＃34;因为在获得索引后，关于在另一个列表中获取相应元素的第二部分很简单。

因此，您可以使用array .indexOf() method查找数组中项目的索引，或者通过.call()，您可以在NodeList上使用该方法：

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

...之后index将成为您正在寻找的元素的索引。（如果找不到，则返回-1，但在您的情况下，您知道它将被找到。）所以modalImages[index]是另一个列表中的相应项目。

另外，不是你要问的问题，而是将点击处理程序绑定到循环中的每个图像，我会将单个处理程序绑定到包含的UL元素，并在该处理程序中测试{{1}查看它是否是IMG元素。这称为委托事件处理：单击元素上的事件＆＃34;冒泡＆＃34;通过它们的包含元素，可以在UL级别处理任何图库IMG元素的点击。

出于演示目的，点击我指定一个event.target类，使相应的项目变黄（并删除任何先前的选择）。

＆＃13;

selected

＆＃13;

// 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")
});

＆＃13;

.selected { background-color: yellow; }

＆＃13;

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

1 个答案: