无法在查询选择器中使用 .keyCode

Question

我正在尝试在 javascript 中使用 .keyCode 来选择一个按下的键，但每次按下一个键时，控制台都会打印 null

这是相关的CSS代码

  <audio data-key="65" src="sounds\crash.mp3"></audio>
  <audio data-key="83" src="sounds\kick-bass.mp3"></audio>
  <audio data-key="68" src="sounds\snare.mp3"></audio>
  <audio data-key="70" src="sounds\tom-1.mp3"></audio>
  <audio data-key="71" src="sounds\tom-2.mp3"></audio>
  <audio data-key="72" src="sounds\tom-3.mp3"></audio>
  <audio data-key="74" src="sounds\sound-effect-thriller-1-108404.mp3"></audio>
  <audio data-key="75" src="sounds\tom-4.mp3"></audio>
  <audio data-key="76" src="sounds\flautatravessera-46420.mp3"></audio>

这是我试过的javascript代码

    window.addEventListener('keydown', function(e){
    const audio=this.document.querySelector('audio[data-key="${e.keyCode}"]')
    console.log(audio);
    audio.play();
   }
   )

它在 console.log(audio) 中显示为空

Answer 1

使用反引号分隔 template literals。

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);