javascript - 多个音频标签无法一起正常工作

Question

我正在尝试为我的一个项目编写一个音板网站，我希望能够单击<a>标签，并使其播放音频到某个<audio>标签。到目前为止，我正在使用在SO上找到的以下代码:

<a onclick="this.firstChild.play()"><audio src="1.aif"></audio>1</a>

尽管这在大多数情况下可行，但在iOS上使用时，如果单击“1”而不是a，它将选择另一个要播放的元素(页面上有多个元素)。我的想法是我应该拥有它，以便当您单击 <a>时，它通过一个类播放某个 <audio>剪辑，

<a onclick="(.1).play()"><audio class="1" src="1.aif"></audio>1</a>

我不确定这是否是最好的方法，如果是，那么调用类而不是 firstChild的语法是什么。任何指导将不胜感激。

Answer 1

如果您要为元素提供单独的类名，那实际上就是id的目的。 (类更适合应用于多个元素。)所以也许像这样:

<a onclick="document.getElementById('a1').play()"><audio id="a1" src="1.aif"></audio>1</a>

话虽如此，按类获取元素的方法是使用 .getElementsByClassName() -请注意，它以NodeList形式返回元素(复数)，因此即使您知道给定类中只有一个元素，也必须允许这样做:

<a onclick="document.getElementsByClassName('1')[0].play()"><audio class="1" src="1.aif"></audio>1</a>

请注意，如 Quirksmode compatibility tables所示，并非所有浏览器都支持 .getElementsByClassName()。

(您也可以使用 document.querySelectorAll() ，但较旧的浏览器也不支持。)