重置先前选择的链接背景颜色

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

如果这是一个 html5 视频，请使用前端属性来检测视频何时完成播放：

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

Answer 2

您似乎正在使用音乐<video>。考虑到这一点，"歌曲不再播放"。我假设这意味着视频已经结束。在这种情况下，您可以有一个事件onended，它将背景颜色更改为原始颜色：

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

Answer 3

在搜索谷歌和一些游戏后，想出了答案。

谢谢你向Spencer Wieczorek和Walker 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();**
};