Return class in Javascript 元素 inside 元素的当前索引

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>的child！

这对JavaScript使用很重要（children元素）：

1) 第一个解决方案：没有函数 outside of 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) 第二种解决方案：使用 function outside of 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 作为函数的 argument。

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

这是因为 buttons 是一个 "live HTMLCollection" 而不是普通数组，如 MDN 中所述。您需要使用 Array 构造函数将 NodeList 线程化为普通数组才能使用 indexOf.

也就是说，你的play函数变成了这样：

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

Return class in Javascript 元素 inside 元素的当前索引

Return the current index of element in element inside of class in Javascript

html

javascript

indexing

html5-audio