javascript - (使用 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

将它们放入选择器时，您必须转义 #。寻找说

的行

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

参见 https://api.jquery.com/category/selectors/和 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>