带加号的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

很可能是因为加号是相邻的CSS选择器。，这会导致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

注：“解决办法”

试着利用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‘’Mara很好地解释了为什么它不起作用，并展示了一个体面的工作-周旋。

另一个解决办法是在加号前面加上一个反斜杠，以避开加号。

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

小提琴

来自选择器的jQuery文档

若要使用任何元字符(如!"#$%&'()*+,./:;<=>?@[]^`{|}~ )作为名称的字面部分，必须使用两个反斜杠：\\对其进行转义。例如，带有id="foo.bar"的元素可以使用选择器$("#foo\\.bar")。W3C CSS规范包含有关有效CSS选择器的完整规则集。Mathias在标识符的CSS字符转义序列上的博客文章也很有用。

还请注意，当给定选择器document.querySelector()时，#div-2+将引发以下错误

SyntaxError: An invalid or illegal string was specified.

小提琴