jQuery改变自定义attritbute

Question

我有一个音频播放器，用户可以点击列表中歌曲旁边的播放按钮，然后播放器开始播放音频。播放按钮可以暂停按钮，以便用户暂停音频。我遇到的问题是，我不能换一个自定义的从游戏中走出的属性（数据机动作）暂停一旦点击会发生：

的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> 

任何帮助非常感谢！

Answer 1

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

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

Answer 2

主要的问题，我看到的是，你所访问data-属性与.attr方法，而不是.data方法。我不知道为什么这会导致一个问题，但你似乎混合和匹配这两个。

我设置了一个简单的jsfiddle example换掉那个属性，它似乎不会导致太多的问题。

基本上，当你想要的元素从游戏中切换到暂停您可以使用

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

，反之亦然

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

Answer 3

彼时我只是用类名。

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; 
    }); 
};