jQuery con il segno più

Question

Mi chiedo perché jQuery non ammette il segno "+". Ecco un esempio di come funziona con "1" e "3" ma non con "2+". Basta passare il mouse sopra il testo sopra ogni 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

Più probabilmente perché the plus sign is the adjacent CSS selector, che fa sì che la biblioteca di selezione Sizzle jQuery utilizza per assumere si intende un selettore adiacente.

Un modo per aggirare questo sarebbe utilizzare un selettore di attributo, che seleziona l'attributo id. Anche se molte persone sostengono che mettere un segno più nel id è una cattiva idea.

di lavoro Esempio:

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

nota, "soluzione alternativa"

Prova utilizzando 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 fa un buon lavoro spiegando perché non funziona e mostra un buon lavoro.

Un'altra soluzione è sfuggire al segno più precedendolo con un backslash.

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

jsfiddle

Dal jQuery documentation for Selectors:

Per utilizzare uno dei meta-caratteri (come ad esempio !"#$%&'()*+,./:;<=>?@[]^`{|}~) come parte letterale di un nome, deve essere fuggito con con due backslash: \\. Ad esempio, un elemento con id="foo.bar" può utilizzare il selettore $("#foo\\.bar"). La specifica W3C CSS contiene lo complete set of rules regarding valid CSS selectors. Utile anche il post di blog di Mathias Bynens su CSS character escape sequences for identifiers.

Si noti inoltre che document.querySelector() tiri il seguente errore quando dato il selettore #div-2+:

SyntaxError: An invalid or illegal string was specified. 

jsfiddle