【问题标题】:How to make this JavaScript function also compatible with Internet Explorer如何使这个 JavaScript 函数也与 Internet Explorer 兼容
【发布时间】:2019-11-18 14:57:12
【问题描述】:

我不是 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);

}

来自Get index of clicked element using pure 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');
    }
  });
}
    }

【问题讨论】:

标签: javascript loops internet-explorer


【解决方案1】:

感谢 cmets 的建议,以及直接在 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);
  }
};

【讨论】:

  • 感谢您发布此问题的解决方案。我建议您在 48 小时后尝试将您自己的答案标记为该问题的可接受答案,此时该答案可以标记。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-11-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-24
相关资源
最近更新 更多