Question

如何使用 javascript 链接两个元素的数据键属性？

2017-07-09

3083

javascript jquery html

我一直在关注 #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 is not defined 。那么我如何让它在单击事件时播放音频？

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

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

Answer 1

您必须获取 data-key 属性的值。使用模板文字，它会在您的选择器中为您提供 ${ 语法，您可以使用 Vanilla JS 或 jQuery 按照以下两个示例执行此操作。我建议阅读有效的 DOM 选择器以及基本的 dom 元素属性访问。

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

$(".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

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

$(".key").click(function() {
 var key = $(this).data('key');
 var audio = $('audio[data-key='+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"> </audio>

Answer 3

有很多方法可以做到这一点，使用你熟悉的 this.dataset.key 或 $(this).data('key') :

$(".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();
}

<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>