jQuery change custom attritbute

I have an audio player in which a user can click on a play button next to songs in a list and the player begins streaming the audio. The play button swaps out for a pause button so that the user can pause the audio. The issue I am running into is that I can't swap a custom attribute out (data-player-action) from play to pause once the click happens:

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 hre开发者_JS百科f=\"#\" 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>

any help is greatly appreciated!!

jQuery's data() method can be used to modify HTML5 custom attributes. Just remember to omit the data- prefix.

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

The main problem I see is that you're accessing data- attributes with the .attr method rather than the .data method. Im not sure why this should cause an issue but you seem to mix and match the two.

I set up a simple jsfiddle example of swapping out that attribute and it seems to not cause too much of a problem.

Basically, when you want to change the element from play to pause you can use

$(this).data('player-action','pause')

and vice versa

$(this).data('player-action','play')

I wound up just using the class names.

var $playerActions, playerInit;
$playerActions = ["play", "pause", "playAlbum"];
$('.btn-control').live("click", function() {
  var $action, $classList, $song_id, self;
  self = $(this);
  $classList = self.attr('class').split(/\s+/);
  $action = null;
  $.each($classList, function(index, item) {
    if (jQuery.inArray(item, $playerActions) > -1) {
      return $action = item;
    }
  });
  $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');
  $('.tracks tr td.player-controls a').removeClass('pause').addClass('play');
  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;
  });
};