jQuery ze znakiem plusa

Question

Zastanawiam się, dlaczego jQuery nie zezwala na znak "+". Oto przykład tego, jak działa z "1" i "3", ale nie z "2+". Po prostu najedź myszką na tekst powyżej każdego elementu div.

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

JSFiddle

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

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

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

 
}); 
 

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

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

 
\t $('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

Most-prawdopodobnie dlatego the plus sign is the adjacent CSS selector, co powoduje bibliotekę jQuery używa selektora trzask zakładać znaczy sąsiednią selektora.

Jednym ze sposobów obejścia tego byłoby użycie selektora atrybutu, który wybiera atrybut id. Chociaż wiele osób twierdzi, że wprowadzenie znaku plus w id jest złym pomysłem.

Przykład pracy:

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

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

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

 
}); 
 

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

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

 
\t $('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

Uwaga "obejście"

Spróbuj wykorzystując 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 wykonuje dobrą pracę wyjaśniając, dlaczego to nie działa i pokazuje przyzwoitą pracę.

Innym obejściem jest uciec ze znaku plus, poprzedzając go ukośnikiem odwrotnym.

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

jsfiddle

Z jQuery documentation for Selectors:

Aby użyć dowolnej z meta-znaków (takich jak !"#$%&'()*+,./:;<=>?@[]^`{|}~) jako dosłowne część nazwy, musi być uciekł z z dwoma tylnymi ukośnikami: \\. Na przykład element z id="foo.bar" może używać selektora $("#foo\\.bar"). Specyfikacja W3C CSS zawiera complete set of rules regarding valid CSS selectors. Przydaje się także wpis w blogu Mathiasa Bynensa pod numerem CSS character escape sequences for identifiers.

Należy również pamiętać, że document.querySelector() wyrzuca następujący błąd przy podawaniu selektora #div-2+:

SyntaxError: An invalid or illegal string was specified. 

jsfiddle