javascript - 尝试在点击时替换音频 src 值？

Question

我正在尝试为我目前正在开发的网站编写一个播放列表，但目前遇到了一些问题。到目前为止，我已经编写了脚本，它用第二首歌替换了默认歌曲，但点击后不会恢复。有什么建议吗？

HTML...

<audio id="player" src="../audio/small-skeletal.mp3" type="audio/mp3" controls autoplay></audio>    

<div id="audio_list" style="margin-top: 100px;">
    <div id="track">
        <h2 class="change-song" data-track="http://www.birp.fm/music/playlists/2014/january-2014/027%20-%20Phantogram%20-%20Fall%20In%20Love.mp3">Switch to second song</h2>
        <h2 id="bb" class="change-song" data-track="http://www.logicwebmedia.com/dev/ecb/new-dev/audio/small-skeletal.mp3">Change it back!!</h2>
    </div>

$('.change-song').click(function(){
    var song = $('.change-song').data('track');
    $('#player').attr('src', song).attr('autoload', 'auto').attr('autoplay');
});

脚本只返回第一首歌曲作为值，而不返回第二首歌曲。我该如何解决这个问题？

Answer 1

将您的click函数更改为:

$('.change-song').click(function(){
    var song = $( this ).data('track');
    $('#player').attr('src', song).attr('autoload','auto').attr('autoplay');
});

this 是对被单击元素的引用。