Question

所以我在这里使用的函数很简单（也许不是很多idk），这意味着要发生的一切是：在具有.img类的页面上单击图像时，它将打开一个模式以显示较大的图片的视图。简单吧？很好，它在除IE（我已经讨厌IE）之外的所有浏览器中都能正常工作

最初在谷歌搜索之后，代码是使用箭头函数构建的，我发现IE不支持箭头函数..（为什么会这样？），所以我只是将箭头函数更改为一个函数。浏览器...仍然不在IE中。

   img.forEach((img) => {
    img.addEventListener('click', function mdl() {
     modal.style.display = 'block';
     modalImg.src = this.src;
   })
 })

img.forEach(function arrowFunction(img) {
  img.addEventListener('click', function mdl() {
    modal.style.display = 'block';
    modalImg.src = this.src;
  });
});

Answer 1

NodeList.prototype.forEach是一种较新的方法，只有较新的浏览器才支持。不仅仅是IE无法理解它-直到Chrome 51和FF 50（2016年中）才得以实施。

改为在.call上使用Array.prototype.forEach（由于img是一个集合，可能将其称为imgs，所以复数而不是img可以使代码更具可读性）：

Array.prototype.forEach.call(
  imgs,
  function(img) {
    img.onclick = function() {
      modal.style.display = 'block';
      modalImg.src = img.src;
    };
  }
);

或使用polyfill：

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

当然，您也可以使用for循环进行迭代，但是IMO很难看-使用forEach看起来更干净。

适用于IE的实时代码段

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

var imgs = document.querySelectorAll('img[src]');
imgs.forEach(function(img) {
  img.onclick = function() {
    modal.style.display = 'block';
    modalImg.src = img.src;
  };
});

<div id="modal">
  <img id="modalImg">
</div>

<div style="border: 1px solid black"></div>

<img src="https://graph.facebook.com/1653262911/picture?type=large">
<img src="https://i.stack.imgur.com/Vfbzj.png?s=32&g=1">

Answer 2

假设img是NodeList或HTMLCollection，您还可以返回到基本for循环，该循环可与任何NodeList或{{ 1}}在IE中：

HTMLCollection

如果这不起作用，请告诉我们for (var i = 0; i < img.length; i++) { img[i].addEventListener('click', function mdl() { modal.style.display = 'block'; modalImg.src = this.src; }) }到底是什么，或者向我们展示设置该变量的代码，以便我们自己了解它的含义。

此外，您可能希望将img插入到click事件监听器中，以便查看它是否确实在触发。

仅供参考，很少有人会为IE进行编码。这将很快成为一种垂死的技能（很少有人能够或将会做到这一点）。

Javascript forEach（）在IE中无法正常运行

2 个答案: