试图在单击时替换音频 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');
});

脚本仅 returns 第一首歌曲作为值，而不是第二首..我该如何解决这个问题？

Answer 1

将您的 click 函数更改为：

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

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

Answer 2

您需要使用 this 作为点击处理程序中被点击的 .change-song 元素的引用。您当前的代码是同时选择两个元素，当您检索 track 数据属性时，它只会从匹配集中的第一个元素中获取它。

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

Answer 3

将您的 $('.change-song').data('track'); 更改为 $(this).data('track');，这将为您提供正确的范围。抱歉更改片段中的歌曲文件。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="buttonmit2ani">
  <audio id="player" src="audio/acdc.ogg" controls autoplay></audio>
  <div id="audio_list" style="margin-top: 100px;">
    <div id="track">
      <h2 id="aa" class="change-song" data-track="audio/acdc.ogg">Switch to second song</h2>
      <h2 id="bb" class="change-song" data-track="audio/radiohead.ogg">Change it back!!</h2>
    </div>
  </div>
</div>

试图在单击时替换音频 src 值？

Attempting to replace an audio src value on click?

javascript

jquery

html5-audio