重置以前選擇的鏈接背景顏色

Question

嗨，我有一首歌曲播放列表&在播放器中使用JavaScript將播放歌曲的背景色設置爲淺綠色。我知道我可以使用a：focus，但是如果用戶在播放歌曲時選擇歌詞，則歌曲將繼續播放，但它會失去焦點，因此背景色將恢復爲原始。當歌曲不再播放或選擇另一首歌曲時，我需要使用JavaScript將歌曲的顏色更改爲原始的顏色。代碼如下。

<!-- Video Player Script --> 


var video_playlist = document.getElementById("video_player"); 
var links = video_playlist.getElementsByTagName('a'); 
for (var i=0; i<links.length; i++) {     
    links[i].onclick = handler;      
}; 

function handler(e) {        
    e.preventDefault();  
    videotarget = this.getAttribute("href"); 
    filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; 
    video = document.querySelector("#video_player video"); 
    source = document.querySelectorAll("#video_player video source"); 
    source[0].src = filename + ".mp3"; 
    video.load(); 
    video.play(); 
    this.style.background = "#AAFF8D";     
};  

Answer 1

淘谷歌&後一些出場想出了答案。

謝謝你去斯賓塞Wieczorek &沃克Boh的答案我認爲應該工作。

下面的代碼：

<!-- Video Player Script --> 


<!-- Get Selected Link --> 
var video_playlist = document.getElementById("video_player"); 
var links = video_playlist.getElementsByTagName('a'); 
**var ele = video_playlist.getElementsByTagName("a"); 
var activeEle = null;** 

for (var i=0; i<links.length; i++) 
{     
links[i].onclick = handler; 
}; 


<!-- Find Previously Selected Link --> 
**for(var i=0; i<ele.length; i++) 
{ 
if(ele.item(i).style.background == "##AAFF8D") 
{ 
document.write(ele.item(i).id); 
break; 
} 
}** 

<!-- Highlight Selected Link & Remove Highlght On Previous Link -->    
**function highlight() 
{ 
if (activeEle){ 
activeEle.style.background = "#F9F9F9"; 
}        
var oObj = event.currentTarget; 
oObj.style.background = "#AAFF8D"; 
activeEle = oObj; 
}** 


function handler(e) 
{ 
e.preventDefault();  
videotarget = this.getAttribute("href"); 
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || 
videotarget; 
video = document.querySelector("#video_player video"); 
source = document.querySelectorAll("#video_player video source");     
source[0].src = filename + ".mp3"; 
video.load(); 
video.play(); 
**highlight();** 
};  

Answer 2

如果是這樣那麼HTML5視頻使用onended proptery當影片播放完畢後，檢測：

video.onended = function(e) { 
    // change background color here 
}; 

Answer 3

看來，您使用的是<video>爲樂。考慮到「歌曲不再播放」。我將假設這意味着視頻已經結束。在這種情況下，你可以有一個事件onended將背景顏色更改爲原文：

var player = document.getElementById("video_player"); 
player.onended = function(){ 
    // Change background color here 
};