Question

很抱歉，如果标题不准确，不确定如何描述它。我有一些js，我用各种其他教程拼凑在一起。它正在运作，但我希望能更多地了解它是如何工作的。

代码用于充满图像的页面上的模态，您可以在其中单击任何图像，然后启动包含该图像的模态。以下是代码的相关部分：

function modal(modalId, modalImg) {
  var image = document.getElementsByClassName('modalImg');
  var imageLength = image.length;
  var myModal = document.getElementById(modalId);
  var modalImg = document.getElementById(modalImg);
  for (var i = 0; i < imageLength; i++) {
    (function(index) {
      image[i].onclick = function() {
        myModal.style.display = "block";
        modalImg.src = this.src;
        imgIndex = index;
      }
    })(i);
  }
}

您可以看到此代码正常工作（并在完整上下文中）here。

我试图理解的部分涉及闭包函数和事件监听器。因此调用了闭包函数，i（for-loop＆＃39; s计数器）作为index参数传递。我的问题是，如何将i设置为所点击图像的索引？

Answer 1

如果我们查看此代码段：

(function(index) {
  image[i].onclick = function() {
    myModal.style.display = "block";
    modalImg.src = this.src;

    // `index` here is a variable accessible through closure scope
    imgIndex = index;
  }
})(i);

代码遍历所有图像，并将每个图像索引作为i变量传递，然后在closure回调中将其作为click捕获。

JavaScript闭包函数传递给事件监听器

1 个答案: