如何使用jQuery通过data-key属性从列表中获取audio元素？

嗨，我来帮你搞定这个问题！你遇到的问题核心是事件对象的属性获取错了，咱们一步步来理清楚：

首先，你原生JS的代码是对的，因为你用了evt.keyCode——也就是从键盘事件对象里拿到了按键的编码。但你写jQuery的时候误用了$(this).keyCode，这里的$(this)指的是绑定事件的DOM元素（比如你给document或者某个输入框绑了keydown事件，this就是那个元素），它本身并没有keyCode属性，这就是代码失效的原因。

正确的写法有两种： #

1. 用模板字符串（和原生JS写法一致）

如果你的事件处理函数是这样的：

$(document).on('keydown', function(evt) {
  // 直接从事件对象evt里取keyCode，插入到jQuery选择器中
  var audio = $(`audio[data-key="${evt.keyCode}"]`);
  // 比如播放音频：
  if (audio.length) {
    audio[0].play();
  }
});

2. 用字符串拼接（兼容不支持模板字符串的环境）

如果你不想用模板字符串，也可以用传统的字符串拼接方式，同样要注意取evt.keyCode：

$(document).on('keydown', function(evt) {
  var audio = $('audio[data-key="' + evt.keyCode + '"]');
  // 后续操作...
});

额外小提醒 #

现在keyCode已经被官方标记为废弃属性了，如果你是做新的练习，推荐使用evt.key（获取按键的字符，比如"a"、"Enter"）或者evt.code（获取按键的物理编码，比如"KeyA"、"Enter"），这样兼容性和语义性更好。比如：

var audio = $(`audio[data-key="${evt.code}"]`);

当然，这需要你对应的audio元素的data-key属性值改成对应的code值才行~

内容的提问来源于stack exchange，提问作者Sonny