我有一个音频播放器,用户可以在其中单击列表中歌曲旁边的播放按钮,然后播放器开始流式传输音频。播放按钮换成暂停按钮,以便用户可以暂停音频。我遇到的问题是,一旦发生点击,我就无法将自定义属性(数据播放器动作)从播放切换到暂停:

jQuery的:

var playerInit;
$('.btn-control').live("click", function() {
  var $action, $song_id, self;
  self = $(this);
  $action = self.attr('data-player-action');
  $song_id = self.parents("tr").attr('id');
  $(document.body).data('song-id', $song_id);
  playerInit($action, self);
  return false;
});
playerInit = function(action, elem) {
  var jw_content, playerData, self;
  self = $(elem);
  $('.tracks tr td').not(self.parent()).removeClass('currentlyPlaying');
  switch (action) {
    case "play":
      self.removeClass('play').addClass('pause');
      if (self.parent().hasClass('currentlyPlaying')) {
        jwplayer().play(true);
      } else {
        self.parent().addClass('currentlyPlaying');
        $('#player_area').slideDown('200');
        $('#player_wrapper').show();
        jw_content = jQuery.parseJSON(self.attr('data-player-feed'));
        playerData = {
          'streamer': jw_content.Location,
          'file': jw_content.Resource
        };
        jwplayer().load(playerData).play(true);
      }
      break;
    case "pause":
      self.removeClass('pause').addClass('play');
      jwplayer().pause();
      break;
    case "playAlbum":
      jwplayer().play(true);
  }
  return jwplayer().onComplete(function() {
    var $reloadPlayer;
    $(document.body).data('song-id', null);
    self.parentsUntil('.tracks').find('.pause').hide();
    self.parentsUntil('.tracks').find('.play').show();
    self.parent().removeClass('currentlyPlaying');
    return $reloadPlayer = true;
  });
};


HTML:

<a href=\"#\" class=\"btn-control play\" data-player-action='play' data-artist-id='" + data["Artist"]["MnetId"] + "' data-album-id='" + data["MnetId"] + "' data-player-feed='" + x["SampleLocations"].first.to_json + "' data-player-position='0'></a>


任何帮助是极大的赞赏!!

最佳答案

jQuery的data()方法可用于修改HTML5自定义属性。只需记住省略data-前缀。

action = element.data('player-action'); //Get
element.data('player-action', 'pause');  //Set

10-08 08:41