javascript - 如何使这个 JavaScript 函数也与 Internet Explorer 兼容

Question

我不是 JS 方面的专家。我让这个功能工作得很好，但它在 IE 中不起作用。我认为这是因为使用 'let' 的循环函数，然后在查询当前循环项的索引的函数中......我知道这在旧浏览器中可能不支持。

但是，如果没有那部分，我不知道如何达到相同的结果......我发现了这个

var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

从使用纯javascript获取点击元素的索引

但不确定如何使用它。谢谢您的帮助！

我的功能：

   window.onload = function(){


    const openers = document.querySelectorAll('.openerbuttons');
    const fullsections = document.querySelectorAll('.fullsection');

for(let i = 0; i < openers.length; i++){
  openers[i].addEventListener('click',function(){
    if(!fullsections[i].classList.contains('inview')){
        openers.forEach(function(opener) {
            opener.classList.remove('opened');
        });
        fullsections.forEach(function(fullsectionjs) {
    fullsectionjs.classList.remove('inview');
    });
    openers[i].classList.add('opened');
    fullsections[i].classList.add('inview');
    } else{
            openers[i].classList.remove('opened');
            fullsections[i].classList.remove('inview');
    }
  });
}
    }

标签： javascriptloopsinternet-explorer

Answer 1

感谢评论中的建议，以及直接在 IE 11 中进行故障排除（甚至不知道它有控制台），我得到了这个代码。forEach 方法也不支持，所以我也改变了它。

请注意，在 IE 11 中对 classList 有所支持，甚至 classList.contains 也有效。

    'use strict';

window.onload = function () {
  var openers = document.querySelectorAll('.openerbuttons');
  var fullsections = document.querySelectorAll('.fullsection');

  var _loop = function _loop(i) {
    openers[i].addEventListener('click', function () {
      if (!fullsections[i].classList.contains('inview')) {
          for (var j = 0, len = openers.length; j < len; j++) {
          openers[j].classList.remove('opened');
          fullsections[j].classList.remove('inview');
          }
        openers[i].classList.add('opened');
        fullsections[i].classList.add('inview');
      } else {
        openers[i].classList.remove('opened');
        fullsections[i].classList.remove('inview');
      }
    });
  };

  for (var i = 0; i < openers.length; i++) {
    _loop(i);
  }
};