JavaScript实现Div显示/隐藏在Safari中出现SyntaxError问题

这个错误的根源很明确——你代码里用到的ES6箭头函数语法在旧版本的Safari中没有得到支持，浏览器无法解析el=>el.style.display = 'block'这种写法，所以抛出了SyntaxError: The string did not match the expected pattern。

修正方案 #

只需要把箭头函数替换成传统的function写法即可，修改后的JavaScript代码如下：

const btnList = document.querySelectorAll("a[id^=category]"); 
btnList.forEach(function(btn){ 
  btn.addEventListener("click", function(e){ 
    e.preventDefault(); 
    const id = this.id.replace('SeeMore', '') 
    // 替换箭头函数为普通function
    document.querySelectorAll('.' + id).forEach(function(el) {
      el.style.display = 'block';
    });
  }); 
});

为什么这样有效？ #

旧版Safari（比如iOS 9及更早版本）对ES6新特性的支持有限，箭头函数是ES6引入的语法，这类浏览器无法识别。换成传统的函数表达式后，所有主流浏览器（包括Safari）都能正确解析执行，你的显示/隐藏功能就能正常工作了。

额外优化建议 #

如果需要兼容更老旧的浏览器，还可以添加一个小检查，确保querySelectorAll返回的NodeList支持forEach（极少数极旧浏览器可能不支持），可以用如下方式兼容：

const elements = document.querySelectorAll('.' + id);
if (elements.forEach) {
  elements.forEach(function(el) {
    el.style.display = 'block';
  });
} else {
  // 手动遍历NodeList
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.display = 'block';
  }
}

不过这个优化在你的场景里可能不是必须的，因为支持querySelectorAll的Safari版本大多已经支持NodeList的forEach方法，核心问题还是箭头函数的兼容。

内容的提问来源于stack exchange，提问作者michaelmcgurk