如何用原生JavaScript为ul li设置默认选中类并实现点击切换移除效果

修改说明 #

• 原有点击切换选中状态的逻辑可正常运行，仅需新增默认选中的初始化代码，给第一个ul的首个li添加selected类即可实现需求
• 现有逻辑默认全局仅保留一个选中的li，点击任意ul下的li都会自动移除之前的选中样式，符合你描述的交互要求

完整修改后的JS代码 #

var x = document.querySelectorAll('.random-value li');
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {
        var selectedEl = document.querySelector(".selected");
        if (selectedEl) {
            selectedEl.classList.remove("selected");
        }
        this.classList.add("selected");
    }, false);
}
// 新增默认选中逻辑：你已给第一个ul设置了id=first，用该选择器定位更精准
document.querySelector('#first li:first-child').classList.add('selected');

可选适配：多ul独立选中 #

如果你需要两个ul各自维护选中状态（即两个ul可以同时各有一个选中的li），可调整为以下逻辑：

var x = document.querySelectorAll('.random-value li');
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {
        // 仅移除当前点击li所属ul下的选中样式
        var selectedEl = this.closest('.random-value').querySelector(".selected");
        if (selectedEl) {
            selectedEl.classList.remove("selected");
        }
        this.classList.add("selected");
    }, false);
}
// 给第一个ul的第一个li加默认选中
document.querySelector('#first li:first-child').classList.add('selected');

内容的提问来源于stack exchange，提问作者Kumar