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