2

我用 ul 创建了一个音频元素。在 ul 中是链接到不同歌曲的列表项。单击该项目时，我已经更改了歌曲，并且一切正常，但是我希望在当前播放的歌曲结束时歌曲也可以更改。下面是我的html和js。

HTML：

<div id="mp3_player">
    <div id="audio_box">
        <audio id="audioPlayer" preload="auto" src="" controls="controls"></audio>
    </div>
</div>

<ul id="songSelector">
    <a href="song1.mp3"><li>song1</li></a>
    <a href="song2.mp3"><li>song2</li></a>
    <a href="song3.mp3"><li>song3</li></a>
    <a href="song4.mp3"><li>song4</li></a>
</ul>

源没有值，因为它被添加到我的脚本的另一部分。

JS：

$(audio).bind('ended', function() {
    var testing = $('#songSelector').next().attr('href');
    alert(testing);
})

当歌曲结束时，当它应该返回下一个 li 元素上的链接时，警报会返回 undefined。我只是无法弄清楚我做错了什么。

先谢谢了。

4

1 回答 1

1

现在，$('#songSelector').next()要去#songSelectordom中的任何东西。您可能需要跟踪另一个变量中哪个是“当前”的。

var currentSong = $('#songSelector').find('a:first');
$(audio).bind('ended', function() {
    var next = currentSong.next();
    if ( next.length ) {
        currentSong = next;
    } else {
        /* uncomment this if you want it to loop back to the beginning */ 
        // currentSong = $('#songSelector').find('a:first');
    }
    var testing = currentSong.attr('href');
    alert(testing);
});

然后你只需要currentSong在你的click处理程序中进行更新。

于 2013-07-16T23:43:16.750 回答