jquery语法错误无法识别的表达式

Question

我很难弄清楚为什么我的表达式没有被识别。

我的html元素看起来是这样的：

<tr class="beampower_01/target_surface_01-child shown">(...)</tr>

我正试图用表达式来访问它：

$('.' + $(elemClicked).attr("path")+ '-child');

表达式：

console.log($(elemClicked).attr("path"))

结果：

波束功率_01/target_surface_01

我收到的错误是：

未捕获错误：语法错误，无法识别的表达式：.beampower_01/target_surface_01-child

错误在哪里？

Answer 1

虽然beampower_01/target_surface_01-child是放置在元素上的有效类名(请参阅此处和此处(，但.beampower_01/target_surface_01-child是无效的CSS类选择器。类选择器中的类名必须是CSS标识符：

在CSS中，标识符(包括选择器中的元素名称、类和ID(只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A0及更高版本，以及连字符(-(和下划线(_(；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(见下一项(。例如，标识符"；B&W"可以写成"；B&W"或"；B\26 W\3F"；。

(这是旧2.1规范中的语言，便于引用。有效字符没有更改，请参阅现代规范中的此处和此处(

你不可能有这样一个无标题的斜线。

我强烈建议不要在类名中使用斜杠，这样你就不必试图转义它们了。但你可以通过在前面添加一个反斜杠来转义它们：

$('.' + $(elemClicked).attr("data-path").replace(///g, "\/") + '-child')

实例：

$("input[type=button]").on("click", function() {
const elemClicked = this;
$('.' + $(elemClicked).attr("data-path").replace(///g, "\/") + '-child')
.css("color", "blue");
});

<table>
<tbody>
<tr class="beampower_01/target_surface_01-child shown">
<td>Hi there</td>
</tr>
</tbody>
</table>
<input type="button" data-path="beampower_01/target_surface_01" value="Click me">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>