javascript - 带有加号的 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 ，这会导致 jQuery 使用的 Sizzle 选择器库假设您指的是相邻的选择器。

解决此问题的一种方法是使用属性选择器，它选择 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>