Question

我一直在关注#javascript30课程，其中使用javascript和keydown事件将div的数据键与音频的数据键链接如下

HTML

<div data-key = "65" class = "key">
<kbd> A </kbd> <br> <span> Boom </span>
</div>

<audio data-key = "65" src = "sounds/boom.wav" id = "boom"> </audio>

的javascript

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

现在我想在点击div时播放音频，但我不知道如何开始。我试过这个，但它说 Uncaught ReferenceError：key未定义。那么如何让它在点击事件中播放音频？

注意：我有八个不同的音频文件，用于八个不同的div。相应的对具有相同的数据密钥。

$(".key").click(function()
{
const audio = document.getElementById(`${this.data-key}`)
console.log(audio);
audio.play();
});

Answer 1

您必须获取data-key属性的值。使用template literal在您的选择器中提供${}语法，您可以使用Vanilla JS或jQuery执行此操作，下面两个示例。我建议reading up on valid DOM selectors以及基本的dom element attribute访问权限。

DOM元素属性不是元素的顶级属性。它位于元素的NamedNodeMap属性中的attributes。

$(".key").click(function(e) {
  const audio = document.querySelector(`audio[data-key="${this.attributes['data-key'].value}"]`);
  console.log(audio);
  audio.play();
  // or using jQuery
  // const audio = $(`audio[data-key="${$(this).attr('data-key')');
  // audio[0].play();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="65" class="key">
  <kbd> A </kbd> <br> <span> Boom </span>
</div>

<audio data-key="65" src="http://freewavesamples.com/files/Alesis-Sanctuary-QCard-AcoustcBas-C2.wav" id="boom"> </audio>

Answer 2

如果您有多个音频，则可以使用此

＆＃13;

$(".key").click(function() {
 var key = $(this).data('key');
 var audio = $('audio[data-key='+key+']');
 audio[0].play();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="65" class="key">
  <kbd> A </kbd> <br> <span> Boom </span>
</div>

<audio data-key="65" src="http://freewavesamples.com/files/Alesis-Sanctuary-QCard-AcoustcBas-C2.wav"> </audio>

＆＃13;

Answer 3

有许多方法可以使用this.dataset.key或$(this).data('key')使用您熟悉的内容：

＆＃13;

$(".key").click(function() {
  const audio = document.querySelector(`audio[data-key="${this.dataset.key}"]`);
  console.log(audio);
  audio.play();
});

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  audio.play();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="65" class="key">
  <kbd> A </kbd> <br> <span> Boom </span>
</div>

<audio data-key="65" src="sounds/boom.wav" id="boom"> </audio>

＆＃13;

如何使用javascript链接两个元素的data-key属性？

3 个答案: