使用onclick将活动类添加到已经存在的javascript代码中的LI元素中

我看到一堆线程询问如何添加一个类以使标记在javascript中处于活动状态。但是在我的例子中，我已经有了一个javascript，它可以在一个有序的列表（OL>LI>a）中生成一个播放列表，所以我很难实现它

    //Create a function to load a playlist var
function loadPlaylist(thePlaylist) {
    jwplayer().load(thePlaylist)
}
var playerInstance = jwplayer("container");
playerInstance.setup({
    playlist: playlistOne
}); 

var list = document.getElementById("list");
var html = list.innerHTML;
playerInstance.on('ready',function(){
var playlist = playerInstance.getPlaylist();
for (var index=0;index<playlist.length;index++){
var playindex = index +1;
html += "<li><a href='javascript:playThis("+index+")'><img alt='"+playlist[index].title+"'src='" + playlist[index].image + "'/>"+playlist[index].title+"</a><span>"+playlist[index].description+"</span><div style='clear:both'></div></li>"
list.innerHTML = html;
}
});
function playThis(index) {
playerInstance.playlistItem(index);
}

//创建一个函数来加载播放列表变量
功能加载播放列表（播放列表）{
jwplayer（）.load（播放列表）
}
var playerInstance=jwplayer（“容器”）；
playerInstance.setup({
playlist:playlistOne
}); 
var list=document.getElementById（“列表”）；
var html=list.innerHTML；
playerInstance.on（'ready'，function（）{
var playlist=playerInstance.getPlaylist（）；
对于（var index=0；index如果您想像上面那样使用字符串，只需像任何其他元素一样查询它：

html += "<li>...</li>"

document.querySelectorAll("li").forEach(li => {
  li.addEventListener("click", e => console.log(e))
})

您可以像往常一样添加事件侦听器

li.addEventListener("click", e => console.log(e));

然后可以将元素添加到dom中：

document.body.appendChild(li);

如果要像上面那样使用字符串，只需像查询任何其他元素一样进行查询：

html += "<li>...</li>"

document.querySelectorAll("li").forEach(li => {
  li.addEventListener("click", e => console.log(e))
})

您可以像往常一样添加事件侦听器

li.addEventListener("click", e => console.log(e));

然后可以将元素添加到dom中：

document.body.appendChild(li);

您可以在元素的
classList
属性上使用
remove
和
add

function playThis(index) {
    var liElems = document.querySelectorAll('ul > li');

    // remove the active class for all the li
    liElems.forEach(function(elem) {
         elem.classList.remove('active');
    });

    // add the active class to the clicked li
    this.parentNode.classList.add('active');


    playerInstance.playlistItem(index);
}

您可以在元素的
classList
属性上使用
remove
和
add

function playThis(index) {
    var liElems = document.querySelectorAll('ul > li');

    // remove the active class for all the li
    liElems.forEach(function(elem) {
         elem.classList.remove('active');
    });

    // add the active class to the clicked li
    this.parentNode.classList.add('active');


    playerInstance.playlistItem(index);
}


window.onload=函数（）{
var listItems=document.getElementsByTagName（“li”）；
对于（变量i=0；i
歌曲1
歌曲2


window.onload=函数（）{
var listItems=document.getElementsByTagName（“li”）；
对于（变量i=0；i
歌曲1
歌曲2

Hi Sushanth。谢谢你的评论。但是我如何以及在何处实现此功能？我尝试将其放在播放列表脚本之后，但没有效果…首先打开浏览器中的开发工具，检查是否看到任何错误Shi Sushanth。谢谢你的评论。但是我如何以及在何处实现此功能？我尝试将其放在播放列表脚本之后播放列表脚本无效…首先打开浏览器中的开发工具，检查是否出现任何错误。我已尝试了您的第一个备选方案，并将其放在html+=“
…
”之后…但是它杀死了视频播放器。什么都没有显示。我对你的其他选择感到迷茫…对不起，我已经尝试了你的第一个选择，并将它放在html+=“
…
”之后…但它杀死了视频播放器。什么都没有显示。我对你的其他选择感到迷茫…sorryHi Aquaballin，但是我应该在哪里添加那行javascript代码？你应该可以在任何地方添加它。我编辑了我的答案。实际上，一秒钟我会在我的计算机上编辑我的答案，这不对，我不认为。给你，伙计，这个应该对你有很大帮助。如果对你有效，你能通过勾选绿色复选标记将答案标记为正确吗？谢谢！嗨，Aquaballin，但是我应该在哪里添加那行javascript代码？你应该可以在任何地方添加它。我编辑了我的答案。实际上，一秒钟后我会在我的计算机上编辑我的答案，这不对，我不认为。H在你走之前，伙计，这应该对你有很大的帮助。如果这对你有效，你能通过勾选绿色的复选标记将答案标记为正确吗？谢谢！