jQuery 加号

Question

我想知道为什么 jQuery 不允许使用“+”符号。这是一个示例，说明它如何与“1”和“3”一起使用，但不适用于“2+”。只需将鼠标悬停在每个 div.

上方的文本上

<div id="div-2+"></div>

JSFiddle

$('a.hover').mouseover(function() {

    dataI = $(this).data('i');

 $('div#div-' + dataI).addClass('h');

});

$('a.hover').mouseout(function() {

    dataI = $(this).data('i');

 $('div#div-' + dataI).removeClass('h');

});

a {
    display: inline-block;
    width: 100px;
    margin: 60px 20px 60px 0;
    text-align: center;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #ddd;
}

div.h {
    background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1"></div>

<div id="div-2+"></div>

<div id="div-3"></div>

Answer 1

很可能是因为 the plus sign is the adjacent CSS selector，这会导致 Sizzle 选择器库 jQuery 使用假设您指的是相邻的选择器。

解决此问题的一种方法是使用属性选择器，它选择 id 属性。虽然很多人会争辩说在 id 中加上加号是个坏主意。

工作示例：

$('a.hover').mouseover(function() {

    dataI = $(this).data('i');

 $('div[id="div-' + dataI + '"]').addClass('h');

});

$('a.hover').mouseout(function() {

    dataI = $(this).data('i');

 $('div[id="div-' + dataI + '"]').removeClass('h');

});

a {
    display: inline-block;
    width: 100px;
    margin: 60px 20px 60px 0;
    text-align: center;
}

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #ddd;
}

div.h {
    background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1"></div>

<div id="div-2+"></div>

<div id="div-3"></div>

Answer 2

注意，"workaround"

尝试利用 css

a {
  display: inline-block;
  width: 100px;
  margin: 60px 20px 60px 0;
  text-align: center;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: #ddd;
}

a.hover[data-i="1"]:hover ~ div[id$="1"],
a.hover[data-i="2+"]:hover ~ div[id$="2+"],
a.hover[data-i="3"]:hover ~ div[id$="3"] {
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a class="hover" data-i="1">DIV 1</a>

<a class="hover" data-i="2+">DIV 2+</a>

<a class="hover" data-i="3">DIV 3</a>

<br />

<div id="div-1" class="hover"></div>

<div id="div-2+" class="hover"></div>

<div id="div-3" class="hover"></div>

Answer 3

@Alexander O'Mara 很好地解释了为什么它不起作用并展示了一个不错的解决方法。

另一种解决方法是通过在加号前面加上反斜杠来转义加号。

dataI = dataI.replace('+', '\+');

jsfiddle

来自jQuery documentation for Selectors：

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

另请注意，在给定选择器 #div-2+:

时，document.querySelector() 会抛出以下错误

SyntaxError: An invalid or illegal string was specified.

jsfiddle

jQuery 加号

jQuery with the plus sign

html

javascript

jquery

jquery-selectors

工作示例：