jQuery với dấu cộng

Question

Tôi tự hỏi tại sao jQuery không cho phép dấu "+". Đây là một ví dụ về cách nó hoạt động với "1" và "3" nhưng không phải với "2+". Chỉ cần di chuột qua văn bản ở trên mỗi 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

Hầu hết-có khả năng vì the plus sign is the adjacent CSS selector, gây ra các thư viện selector sizzle jQuery sử dụng để giả sử bạn có nghĩa là một selector liền kề.

Một cách xung quanh việc này là sử dụng công cụ chọn thuộc tính, chọn thuộc tính id. Mặc dù nhiều người sẽ tranh luận đặt một dấu cộng trong id là một ý tưởng tồi.

làm việc Ví dụ:

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

Note, "workaround"

Hãy thử sử dụng 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 thực hiện một công việc tốt đẹp để giải thích lý do tại sao nó không hoạt động và cho thấy một công việc phong nha xung quanh.

Một công việc khác xung quanh là để thoát khỏi dấu cộng bằng cách đặt trước dấu gạch chéo ngược.

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

jsfiddle

Từ jQuery documentation for Selectors:

Để sử dụng bất kỳ siêu ký tự (ví dụ như !"#$%&'()*+,./:;<=>?@[]^`{|}~) như là một phần đen của một tên, nó phải được thoát với với hai dấu gạch chéo ngược: \\. Ví dụ: một phần tử có id="foo.bar", có thể sử dụng công cụ chọn $("#foo\\.bar"). Thông số W3C CSS chứa complete set of rules regarding valid CSS selectors. Cũng hữu ích là mục blog của Mathias Bynens trên CSS character escape sequences for identifiers.

Cũng lưu ý rằng document.querySelector() ném lỗi sau khi được chọn #div-2+:

SyntaxError: An invalid or illegal string was specified. 

jsfiddle