使用onclick将已激活的类添加到已存在的javascript代码中的LI元素
[英]Add Active class to LI element in an already existing javascript code with onclick
问题描述
I see bunch of threads asking how to add a class to make a tag active with javascript. 
我看到一堆线程询问如何添加一个类来使用javascript激活标记。 But in my case I already have a javascript which generates a playlist in an Ordered List (OL>LI>A) so I am having difficulties implementing it.... 但在我的情况下，我已经有一个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);
}
So above generates a playlist, and as you can see, the html += is where the list get its HTML output. 所以上面会生成一个播放列表，正如您所看到的，html + =是列表获取HTML输出的位置。 So how would I implement a javascript code so whenever I click on the A link, the LI changes to LI.active 那么我将如何实现一个javascript代码，所以每当我点击A链接时，LI就会变为LI.active
Thanks in advance 提前致谢
3 个解决方案
解决方案1
0 2017-06-19 17:38:07
If you want to use a string like you did above, just query it like any other elem: 如果你想像上面那样使用字符串，只需像任何其他元素一样查询它：
html += "<li>...</li>"
document.querySelectorAll("li").forEach(li => {
li.addEventListener("click", e => console.log(e))
})
Alternatively, You can create an element like so: 或者，您可以创建一个这样的元素：
let li = document.createElement("li");
You can add an event listener like usual 您可以像往常一样添加事件侦听器
li.addEventListener("click", e => console.log(e));
You can then add the elem to the dom: 然后，您可以将elem添加到dom：
document.body.appendChild(li);
解决方案2
0 2017-06-19 17:41:00
You can use remove and add on the classList property of the element. 您可以使用remove并add元素的classList属性。
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);
}
解决方案3
0 2017-06-19 17:42:41
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.