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

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

我对“this.index”部分有疑问，我不确定当前向 JavaScript 询问所单击项目的索引的语法是什么。

有什么想法吗？

Answer 1

实现

• 点击按钮0 -> 播放音频0

• 点击按钮1 -> 播放音频1

• ...

您必须在 <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();
}

重要的是放弃this作为函数的参数。

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>