javascript - 用 JS 无法理解这个 DOM 目标
问题描述
我正在尝试针对这些元素:
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
所以我正在尝试使用此代码来播放它们:
window.addEventListener('keydown', function(e){
const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
console.log(audio);
if(!audio) return; // stop function
audio.play();
});
然而,当按下 A 时,数据键返回 Null。这就是控制台所说的:
KeyboardEvent {isTrusted: true, key: "a", code: "KeyA", location: 0,
ctrlKey: false, …}
index-START.html:65 Uncaught TypeError: Cannot read property 'play' of null
at index-START.html:65
所以我知道我不工作,因为它是空的。但我不明白为什么它是空的。
解决方案
欢迎来到 StackOverflow。
您需要在该字符串周围使用字符串插值符号 ( ` ) 才能正确执行 ${...} 替换:
`audio[data-key="${e.keyCode}"]`
否则,选择器查询正在接收试图匹配数据键等于的元素的文字字符串"${e.keyCode}"
。这称为“模板文字”,您可以在此处阅读有关细微差别的更多信息。
或者,您可以这样做以避免使用模板文字并坚持使用标准引号:
'audio[data-key="' + e.keyCode + '"]'
推荐阅读
- sql - Oracle中对读一致性描述的一些混淆
- r - 在 R - 基于重复字符的子字符串
- playframework - Play 在使用现有数据库创建新 Play 2.6 项目时尝试应用所有 dows 演变
- javascript - ArrayBuffer 和 String 中日字符之间的 JavaScript 转换问题
- javascript - 如果选中单选按钮,如何调用函数
- wordpress - 删除 WooCommerce 产品页面标题
- node.js - 为什么这个 NodeJS 异步函数中没有捕获到错误?
- javascript - 如何在 javascript 中动态加载 gtag.js(谷歌分析)
- python - 如何修复由于 0 维矩阵导致的 NumPy 点差错误?
- c# - 查看看似忽略可见性转换器的输出