jquery语法错误未识别表达式

Question

我很难弄明白为什么我的表情不被人认出来。

我的html元素如下所示：

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

我试着用表情来访问：

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

表达方式：

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

成果如下：

发射功率_01/目标表面_01

我收到的错误是：

未明错误:语法错误，无法识别的表达式：..beampower_01/target_surface_01-子

错误在哪里？

Answer 1

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

在CSS中，标识符(包括选择器中的元素名称、类和in )只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A0及更高的字符，加上连字符(-)和下划线(_)；它们不能以数字、两个连字符或连字符后面的数字开始。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(请参阅下一项)。例如，标识符"B&W?“可以写成"B&W?“或“B26W3F”。

(这是旧的2.1规范中的语言，它便于引用。有效字符没有改变，参见现代规范中的https://www.w3.org/TR/css-syntax-3/#identifier和https://www.w3.org/TR/css-syntax-3/#ident-token-diagram。

你不可能有这样一个未逃脱的斜杠。

我强烈建议不要在类名中使用斜杠，这样您就不必试图逃避它们。但是，您可以通过在前面添加反斜杠来逃避它们：

$('.' + $(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>

​