(Filterung mit JS) Warum funktioniert "#" nicht, während alles andere im Alphabet funktioniert?

Question

Also habe ich Elemente von einer anderen Webseite abgerufen und versucht, eine organisierte Liste daraus zu machen, wenn ein Buchstabe angeklickt wurde , würde alle Titel außer denen ausblenden, deren von einem Buchstaben generierten Klassen übereinstimmen.

Mein Problem; Dies funktionierte für alle von ihnen gut, außer für die Klasse "#", die für jene Elemente bestimmt ist, deren Anfangsbuchstaben nicht A-Z sind (d. H. "3", ".", "/" Usw.). Beachten Sie, wenn Sie auf das "#" im Snippet klicken, wird es entweder alle anzeigen (wenn es zuerst getroffen wird) und einen Fehler anzeigen oder nur einen Fehler anzeigen. Warum funktioniert das und nur das nicht?

Ich habe das Problem mit Jsfiddle hier dupliziert und ersetzt alle meine PHP-Funktionalität mit Nachahmungen (das Programm selbst ist nicht so nutzlos, das ist nur um das Problem zu isolieren). Die ursprüngliche Post machte ich war wahrscheinlich viel zu einschüchternd, mit einer Reihe von verstreuten aber relevant PHP-Skripte mit einem dom-Reader, so das macht es einfacher und relevant:

Schritte

• Klicken Sie auf das zu reproduzieren "Klicken Sie hier" Button
• Klicken Sie auf das #, den ersten Punkt auf der Liste

Erwartet beahvior:

• sollten Unterpunkte neben # (#1 #2 #3)

tatsächliche Verhalten zeigen:

• A JS Fehler tritt auf: jquery-1.10.2.js:1850 Uncaught Error: Syntax error, unrecognized expression: .#

$(document).ready(function(){ 
 
    pelement = 0; 
 
    a = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ"; i = 0; 
 
    while(i<27){ 
 
     $("#letters").append("<li onclick='letShow(this);' class='" 
 
     +a[i]+"'>"+a[i]+"</li>"); 
 
     $("#selection").append(
 
     "<li class='"+a[i]+"'>"+a[i]+"1</li>"+ 
 
     "<li class='"+a[i]+"'>"+a[i]+"2</li>"+ 
 
     "<li class='"+a[i]+"'>"+a[i]+"3</li>"); 
 
     i+=1; 
 
    } 
 
}); 
 

 
function displayToggle(element) { 
 
    $("#"+element).css("display", (($("#"+element).css("display") == "none")?"block":"none")); 
 
} 
 
function letShow(element) { 
 
    if(pelement == "0" || pelement == element || 
 
     $("#selection").css("display") == "none") 
 
     displayToggle('selection'); 
 
    $("#selection li").not("."+$(element).attr("class")).hide(); 
 
    $("."+$(element).attr("class")).show(); 
 
    pelement = element; 
 
}

ul { 
 
    list-style-type:none; 
 
    display:none; 
 
    float:left; 
 
} 
 

 
/*Just to achieve fixed positioning*/ 
 
#anchor { 
 
    float: left; 
 
    position: relative; 
 
} #anchor div { 
 
    position: fixed; 
 
    margin: 15px 0 0 25px; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<div onClick='displayToggle("letters");'>Click Here</div> 
 
<ul id="letters"></ul> 
 
<div id="anchor"><div><ul id="selection"></ul></div></div>

Answer 1

Sie müssen # entkommen, wenn Sie sie in einen Selektor setzen. Suchen Sie die Zeile, die sagt

var escapedClassName = $(element).attr("class").replace('#', '\\#'); 

Siehe https://api.jquery.com/category/selectors/ und https://mathiasbynens.be/notes/css-escapes

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[]^`{|}~) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

$(document).ready(function(){ 
 
    pelement = 0; 
 
    a = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ"; i = 0; 
 
    while(i<27){ 
 
     $("#letters").append("<li onclick='letShow(this);' class='"+a[i]+"'>"+a[i]+"</li>"); 
 
     $("#selection").append(
 
     "<li class='"+a[i]+"'>"+a[i]+"1</li>"+ 
 
     "<li class='"+a[i]+"'>"+a[i]+"2</li>"+ 
 
     "<li class='"+a[i]+"'>"+a[i]+"3</li>"); 
 
     i+=1; 
 
    } 
 
}); 
 

 
function displayToggle(element) { 
 
    $("#"+element).css("display", (($("#"+element) 
 
     .css("display") == "none")?"block":"none")); 
 
} 
 
function letShow(element) { 
 
    if(pelement == "0" || pelement == element || 
 
     $("#selection").css("display") == "none") 
 
     displayToggle('selection'); 
 
    var escapedClassName = $(element).attr("class").replace('#', '\\#'); 
 
    $("#selection li").not("."+escapedClassName).hide(); 
 
    $("."+escapedClassName).show(); 
 
    pelement = element; 
 
}

ul { 
 
    list-style-type:none; 
 
    display:none; 
 
    float:left; 
 
} 
 

 
#anchor { 
 
    float: left; 
 
    position: relative; 
 
} #anchor div { 
 
    position: fixed; 
 
    margin: 15px 0 0 25px; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<div onClick='displayToggle("letters");'>Click Here</div> 
 
<ul id="letters"></ul> 
 
<div id="anchor"><div><ul id="selection"></ul></div></div>