无法让forEach在IE上正常工作

Question

我在代码中完成了一个激活/禁用功能，该功能在Chrome / Firefox上都可以很好地工作，但是由于某些原因，使用forEach时IE中出现错误。

这是IE中显示的错误：

在Chrome和Firefox上，div突出显示该框，并在下面显示正确的框。

这是我正在使用的代码：

"use strict";

var tabButtons = document.querySelectorAll('.navlinksGP > a');

function enableTabButton(buttonId) {
tabButtons.forEach(function(btn) {
if (btn.id === buttonId) {
  btn.disabled = true;
  btn.style.background = '#eeaf00';
    btn.style.color = '#ffffff';
} else {
  btn.disabled = false;
  btn.style.background = '#ffffff';
    btn.style.color = '#eeaf00';
}
});
}
    enableTabButton('word');

var player = document.getElementById('player');

function wButton(element) {
  enableTabButton(element);
  if (element === "word") {
    player.innerHTML = "<h1 id=\"h1update\">Brand & Consumer Marketing</h1>";
  }

<div class="navlinksGP">
   <a id="word" onclick="wButton(this.id); window.location='#container'" href="#">BRAND & CONSUMER MARKETING</a>
</div>

我在IE上唯一遇到的问题是enableTabButton函数根本无法正常工作。

Answer 1

没有Internet Explorer版本支持在forEach()返回的NodeList上使用querySelectorAll()。

有一个polyfill可用来解决此问题：https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill

Answer 2

当您用关键字“ jQuery”标记问题时，我将使用jQuery回答您的问题:-) 如果需要，请检查以下解决方案。在IE11和所有其他更现代的浏览器中都对我有效。

"use strict";

var tabButtons = document.querySelectorAll('.navlinksGP > a');

function enableTabButton(buttonId) {

  $(tabButtons).each(function() {

    //console.log($(this).attr("id"));

    if ($(this).attr("id") === buttonId) {
      $(this).prop("disabled", true);
      $(this).css("background-color", "#eeaf00");
      $(this).css("color", "#ffffff");
    } else {
      $(this).prop("disabled", false);
      $(this).css("background-color", "#ffffff");
      $(this).css("color", "#eeaf00");
    }

  });
}

enableTabButton('word');

var player = document.getElementById('player');

function wButton(element) {
  enableTabButton(element);
  if (element === "word") {
    player.innerHTML = "<h1 id=\"h1update\">Brand & Consumer Marketing</h1>";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="navlinksGP">
   <a id="word" onclick="wButton(this.id); window.location='#container'" href="#">BRAND & CONSUMER MARKETING</a>
</div>