在已有的javascript代码中添加活动类到LI元素onclick

我看到一堆线程询问如何添加一个类来使标记在javascript中处于活动状态。但在我的情况我已经有其有序列表中生成一个播放列表（OL> LI> A），所以我有实现它的困难....在已有的javascript代码中添加活动类到LI元素onclick

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

所以上面生成的播放列表，并作为一个javascript你可以看到，html + =是列表获取HTML输出的地方。所以，我将如何实现一个JavaScript代码，所以每当我点击一个链接后，李如果你想要一个像上面一样使用字符串变成LI.active

在此先感谢

来源

2017-06-19 SidBook

，只是对其进行查询像任何其他ELEM：

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

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

或者，您可以创建出象这样的元素：

let li = document.createElement("li");

您可以添加一个事件监听像往常一样

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

您可以将ELEM然后添加到DOM：

document.body.appendChild(li);

来源

2017-06-19 17:38:07 Ced

嗨CED，我已经试过你的第一个可选择性并把它放在HTML后+ = “

...

” 吧... 但它杀死的录像机。什么都没有显示。我觉得与你的其他选择丢失...对不起 – SidBook

您可以在元素的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); 
}

来源

2017-06-19 17:41:00

嗨Sushanth。谢谢你的评论。但是我如何以及在哪里实现这个功能？我试图把它放在播放列表脚本后，但无济于事...... – SidBook

首先在浏览器中打开开发工具，并检查是否有任何错误 –

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<script type="text/javascript"> 
    window.onload = function() { 
    var listItems = document.getElementsByTagName("li"); 
    for (var i = 0; i < listItems.length; i++) { 
     listItems[i].addEventListener('click',changeClass,false); 
    } 
} 
function changeClass() { 
    this.classList.add("active"); 
} 
</script> 
<ul> 
    <li>song1</li> 
    <li>song2</li> 
</ul> 
</body> 
</html>

来源

2017-06-19 17:42:41 Aquaballin

嗨Aquaballin，但我应该在哪里添加该行代码？ – SidBook

你应该可以将它添加到任何地方。我编辑了我的答案。 – Aquaballin

实际上，一秒钟我会编辑我的答案，当我到我的电脑，这是不正确的，我不认为。 – Aquaballin

在已有的javascript代码中添加活动类到LI元素onclick

回答

相关问题