时间戳

首页 > 解决方案 > 在 document.querySelector() 字段中使用 # 符号

javascript - 在 document.querySelector() 字段中使用 # 符号

问题描述

我正在使用 Javascript 和Tonal.js库开发一个音乐网络应用程序

使用 Tonal.js，我将获得（例如）美国符号的和弦音符，对应于从 A 到 G 的字母。

众所周知，平音符用b符号表示，而升音符用#表示（例如Ab和G#）

我已经实现了一个可以正常工作的代码，以便从我的 html 元素中检索注释：

1）Html：

  <div id="pad">
    <ol class="even first">
      <li class='hex C' ><div class="note">C2</div></li>
      <li class='hex G' ><div class="note">G2</div></li>
      <li class='hex Db'><div class="note">Db3</div></li>
      <li class='hex A#'><div class="note">A#3</div></li>
      <li class='hex E' ><div class="note">E4</div></li>
    </ol>  
 </div>

2）javascript：

   full_chord = "CMaj7"
   chord_notes = Tonal.Chord.notes(full_chord);//takes a signature of a chord and returns the single notes that compose the chord
   var selected_notes = chord_notes.map(title => document.querySelectorAll("."+title)); //returns the html elements with the chord notes

这很好用，直到我通过签名中带有#的注释。例如：

document.querySelectorAll(".C")); //works
document.querySelectorAll(".Cb")); //works
document.querySelectorAll(".C#")); //error: invalid selector

有没有办法在我的选择器中使用#符号？不幸的是，我必须使用它，因为它是一个音乐应用程序。

标签： javascripthtmljquery-selectors

解决方案

推荐阅读