jquery报错:Uncaught Error: Syntax error, unrecognized expression

## 简介

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

<!-- more -->

## 报错

### 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：**好的编程习惯果然很关键！**