非常简单的翻转在 Safari 中不起作用答案

【问题标题】：Very simple rollover not working in Safari非常简单的翻转在 Safari 中不起作用
【发布时间】：2019-11-14 23:18:56
【问题描述】：

我真的很想了解为什么这么简单的翻转功能在 Safari 中不起作用。我创建了一个类似的帖子，有人以某种方式使它起作用：

Cannot find variable in a simple function inside a for of loop (safari)

但是，此演示略有不同，可在 Chrome 中运行，但由于某些未知原因无法在 safari 中运行。看看下面的代码：

const links = document.querySelectorAll('#list a'),
      display = document.querySelector('#argh');

for (const link of links) {
  link.addEventListener('mouseover', change);
  link.addEventListener('click', (e) => {
    e.preventDefault();
  });

  function change() {
    console.log(link);
    let color;

    switch (link.className) {
      case 'one':
        color = 'blue';
        link.classList.add('active');
        break;
      case 'two':
        color = 'green';
        link.classList.add('active');
        break;
      case 'three':
        color = 'pink';
        link.classList.add('active');
        break;
    }
    
    display.style['background-color'] = color;
  }
}

#argh {
  height: 200px;
  width: 300px;
}

<div id='argh' style='background-color: red'>
</div>

<p> select one </p>
<ul id='list'>
  <li><a class='one' href='#'>test 1</a></li>
  <li><a class='two' href='#'>test 2</a></li>
  <li><a class='three' href='#'>test 3</a></li>
</ul>

您只需将光标悬停在“测试”项目符号上即可更改主显示的颜色。我看不出为什么这在 Safari 中不起作用。

有人能解释一下如何解决吗？老实说，我不知道如何解决它。从我在上面链接中提出的另一个问题来看，解决方案可能与范围界定有关 - 但如果是这种情况，那么为什么它已经在其他浏览器中工作了？

Codepen：https://codepen.io/ns91/pen/eYYPwVR

感谢您的帮助。

【问题讨论】：

您正在使用箭头函数语法。你确定 Safari 支持 ES6 了吗？
修复ES5语法后，尝试将函数更改部分移到addEventListener上方。在某些浏览器中，当函数不在全局范围内时，在使用之前声明函数会很有帮助。此外，在循环内声明函数是不可以的。尝试另一种方法。
控制台报错，提示找不到link，尝试使用更常规的方法，即将querySelectorAll结果转换为数组并循环迭代。

标签： javascript

【解决方案1】：

在您当前的代码中，函数change 不知道link 是什么，因为它是在for 循环的不同范围内声明的。

您可以通过将change 函数更新为：

 function change(e) {
    const link = e.target;
    console.log(link);
    let color;

...

工作笔（在 safari 中测试）https://codepen.io/JustH/pen/LYYgwVa

编辑：您当前的代码也只能工作一次，因为一旦您将“活动”添加到类名，switch 语句将不再工作。您想拆分字符串以获得所需的类。

【讨论】：