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是对单击元素的引用。

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值？

3 个答案: