Javascript forEach () не работает в IE

Question

Таким образом, функция, которую я здесь использую, проста (возможно, не так уж и много), и все, что должно произойти, - это когда при нажатии на изображение на странице, имеющей класс .img, откроется модальное окно, чтобы показать большой вид на картинку. просто верно? хорошо это работает просто отлично во всех браузерах, кроме IE (я уже ненавижу IE)

Первоначально код был построен с помощью функции со стрелкой, после поиска в Google я обнаружил, что 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

Предполагая, что img является NodeList или HTMLCollection, вы также можете просто вернуться к базовому циклу for, который работает с любым NodeList или HTMLCollection в IE:

for (var i = 0; i < img.length; i++) {
  img[i].addEventListener('click', function mdl() {
    modal.style.display = 'block';
    modalImg.src = this.src;
  })
}

Если это не сработает, то, пожалуйста, скажите нам, что на самом деле является img, или покажите нам код, который устанавливает эту переменную, чтобы мы сами могли увидеть, что это такое.

Кроме того, вы можете захотетьчтобы вставить console.log(...) в прослушиватель событий click, чтобы вы могли видеть, действительно ли он запускается или нет.

К вашему сведению, редко можно увидеть людей, все еще пишущих для IE.Это скоро станет умирающим навыком (очень мало людей, которые могут или будут это делать).

Answer 2

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 для итерации, но это уродливое ИМО - использование 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">