（使用JS过滤）为什么“＃”在字母表中的其他内容不起作用时不起作用

Question

所以，我正在从另一个网页中检索元素，并试图从中创建一个有组织的列表，当单击一个字母时，将隐藏除单个字母生成的类匹配的标题之外的所有标题。

我的问题;除了'＃'类之外，这适用于所有这些类，它被指定为那些起始字母不是A-Z的元素（即“3”，“。”，“/”等）。请注意，当您单击代码段中的“＃”时，它将显示所有这些内容（如果先被点击）并显示错误，或者只显示错误。为什么那样，只有那样，不起作用。

我在这里用jsfiddle重复了这个问题，用模仿替换了我所有的php功能（程序本身不是没用的，这只是为了隔离问题）。我做的原始帖子可能太恐怖了，有一些分散但相关的PHP脚本，包括一个dom阅读器，所以这使它更容易，更相关：

重现步骤

• 点击“点击此处”按钮
• 点击列表中第一项#

预期的行为：

• 子项应显示在#（#1 #2 #3）
旁边

实际行为：

• 发生JS错误：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

You have to escape # when putting them in a selector. Look for the line that says

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

See https://api.jquery.com/category/selectors/ and 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>