複数のオーディオタグがうまく連携していない

Question

私のプロジェクト用のサウンドボードWebサイトを作成しようとしています。<a>タグをクリックして、特定の<audio>タグにオーディオを再生します。

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

iOSの上でそれを使用しているときに、それは意志Aの代わりに「1」をクリックした場合、これは、ほとんどの場合に動作しますが：今のところ、私は私がSOに見つかったこのコードを使用しています再生する別の要素を選択します（私はページに複数あります）。私の考えは、あなたが<a>をクリックしたとき、それは、これはしかし、それを行うための最善の方法である場合、私はわからないんだけど、クラスを経由して

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

を特定<audio>クリップを果たしているように、私はそれを持っていなければならないということでしたそうであれば、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()をサポートしている：あなたが知っているので、場合でも、あなたはそれを可能にする必要があるクラスに一つだけの要素があります。