简介

有个管理系统项目使用Layui开发的前端，由于出现该报错引发了一个奇怪的BUG，最后采用简单的做法解决了。

报错

BUG现象

原功能大概是使用Layui的面包屑实现了菜单导航功能，BUG现象可概括为：上级面包屑页面报错，导致下级面包屑页面无法关闭。

BUG复现流程：

1. 在【督办】功能中打开名为进度管理(上传)的菜单，出现名为进度管理(上传)（督办）的面包屑，此时控制台(console)中出现报错信息;
2. 在进度管理(上传)（督办）菜单页中，打开其二级页面，出现二级页面面包屑（暂且命名为二级页面），正常且无报错；
3. 点击面包屑中二级页面的关闭按钮，想要关闭该页面，此时控制台(console)中再次出现报错信息，且页面无法关闭！

原报错信息

javascript
jquery-3.3.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: iframe[data-frameid=进度管理(上传)（督办）]
    at oe.error (jquery-3.3.1.min.js:2:12961)
    at oe.tokenize (jquery-3.3.1.min.js:2:18943)
    at oe.select (jquery-3.3.1.min.js:2:21833)
    at Function.oe [as find] (jquery-3.3.1.min.js:2:6808)
    at w.fn.init.find (jquery-3.3.1.min.js:2:24400)
    at w.fn.init (jquery-3.3.1.min.js:2:24889)
    at w (jquery-3.3.1.min.js:2:896)
    at HTMLLIElement.<anonymous> (head.js:122:13)
    at Function.s (layui.js:2:7068)
    at r.each (layui.js:2:6420)

解决

问题分析

思路：

按照正常的问题排查思路，是根据报错信息找到报错代码，然后针对报错代码进行解决。
但此报错信息无法直接找到报错代码文件和行数。
唯一出现的与项目代码有关的内容就是进度管理(上传)（督办），所以需要先找到代码中什么地方有该部分内容的使用。

按照上面的思路发现，生成面包屑时将进度管理(上传)（督办）即作为面包屑的显示名称，也作为了面包屑的id，所以报错内容有data-frameid。

再结合报错信息 Uncaught Error: Syntax error, unrecognized expression，翻译过来就是：未捕获错误：语法错误，无法识别的表达式。

通过以上思路，可以猜到报错原因就是与进度管理(上传)（督办）内容有关。该内容有什么问题呢？结合其他功能菜单测试分析，不难猜到与括号()有关，所以最简单的解决思路（不推荐）就有了：不使用英文括号()。

解决方案1 - 推荐

其实如果你有比较好的编程习惯，大概率不会遇到这个报错吧，因为你大概率不会使用中文作为任何东西的ID吧。如果你的编程习惯再好点，ID大概率也不会出现特殊符号吧。

所以我推荐解决方案是：不要使用 中文 和 特殊符号 作为面包屑的ID。具体的解决方式就由各位自己动脑吧。

解决方案2 - 不推荐

以本文案例为例，将进度管理(上传)（督办）的内容中的()去掉，所以可以将其内容改为进度管理-上传-督办。

PS：好的编程习惯果然很关键！