Question

我有一些HTML元素，如：

       <article class='rock' id='audioApp'>

            <section class="containerAudioApp rock">
                <audio src="audio/one.mp3"></audio>
                <audio src="audio/two.mp3"></audio>
                <button>Normal</button>
                <button>Master</button>
            </section>

            <section class="containerAudioApp rock">
                <audio src="audio/one.mp3"></audio>
                <audio src="audio/two.mp3"></audio>
                <button>Normal</button>
                <button>Master</button>
            </section>

        </article>

每个containerAudioApp部分标记都有2个按钮和两个音频标记。

我想做的是：

点击按钮 0 时，播放音频 0

点击按钮 1 时，播放音频 1

点击按钮 2 时，播放音频 2

等等。

我到目前为止所做的是将事件监听器添加到所有按钮中：

var audioApp = document.getElementById('audioApp');
var buttons = audioApp.getElementsByTagName('button');
var players = audioApp.getElementsByTagName('audio');

for(var i=0;i<buttons.length;i++){
        buttons[i].addEventListener('click', play, false);
}

然后播放功能：

function play(){
    players.item(this.index).play();
}

我有＆＃34; this.index＆＃34;部分，我不知道当前语法是什么，要求JavaScript询问所点击项目的索引。

有什么想法吗？

Answer 1

实现

点击button0 - ＆gt;播放audio0
点击button1 - ＆gt;播放audio1
...

您必须在<button>和<audio>之间建立依赖关系：

<button>Click<audio></audio></button>

现在每个<audio>都是<button>的孩子！

这对于JavaScript使用非常重要（儿童元素）：

1）第一个解决方案：没有addEventListener的外函数：

var audioApp = document.getElementById('audioApp');
var buttons = audioApp.getElementsByTagName('button');
var players = audioApp.getElementsByTagName('audio');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function () {
        console.log(this); // check what this is
        this.children[0].play();
    }, false);
}

addEventListener的功能外，用法：

el.addEventListener('click', function() { f(argument) }, false);

2）第二个解决方案：使用addEventListener的功能：

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function () {
        play(this);
    }, false);
}

function play(current) {
    return current.children[0].play();
}

重要的是将此作为该函数的参数。

HTML：

<article class='rock' id='audioApp'>
    <section class="containerAudioApp rock">
        <button>Normal
            <audio src="audio/one.mp3"></audio>
        </button>
        <button>Master
            <audio src="audio/two.mp3"></audio>
        </button>
    </section>
    <section class="containerAudioApp rock">
        <button>Normal
            <audio src="audio/one.mp3"></audio>
        </button>
        <button>Master
            <audio src="audio/two.mp3"></audio>
        </button>
    </section>
</article>

Answer 2

要求索引的正确方法是：

Array.prototype.indexOf.call( buttons, this );

原因是因为按钮是“实时HTMLCollection”而不是普通数组，如MDN中所述。您需要使用Array构造函数将NodeList作为普通数组进行线程化以使用indexOf。

换句话说，你的游戏功能就像这样：

function play(){
    players.item( Array.prototype.indexOf.call( buttons, this ) ).play();
}

在Javascript中返回类内部元素的当前元素索引

2 个答案: