使用JavaScript为类添加动态选择器

如何使用本机JavaScript向每个复选框动态添加：checked:n类型选择器

我试过这个。HTML

<input type="radio" name="slider" title="slide2" class="slider-nav"/>
<input type="radio" name="slider" title="slide3" class="slider-nav"/>

我的想法是添加滑块nav:checked:nth类型（NN）~。使用JS动态地内部添加滑块

在JacaScript文件中，我有下一个代码：

window.addEventListener("load", (e) => {
    let num = document.getElementsByClassName('slider-nav');
    for (let i = 0; i < num.length; i++) {

        let newClass = 'slider-nav' + ':checked:nth-of-type(' + (i + 1) + ')';
        console.log('newClass: ' + newClass);
        // HOW TO ADD CLASS TO STYLESHEET NOW?
    }
});

window.addEventListener（“加载”，（e）=>{
让num=document.getElementsByClassName（'slider-nav'）；
for（设i=0；i

---

在这里，我不知道如何向类添加属性，以及如何向样式表添加新类？是的，我是JS的初学者。

那些以

：

开头的选择器就是这样，你不直接添加它们；它们的应用取决于匹配元素的状态或位置（等）

我在下面简化了您的示例以演示这一点。根据复选框是否处于

选中状态（
：选中状态
），以及它是第一个还是第二个（
：第n个类型（1）
或第n个类型（2）

），控制

span

后面的颜色

。滑块导航：选中：第n个类型（1）~。滑块内部{
背景颜色：红色
}
.滑块导航：选中：第n个类型（2）~.滑块内部{
背景颜色：蓝色
}
.内滑块{
背景色：洋红色
}

内容

我找到了决定。感谢@Jamiec

const inputs = document.querySelectorAll('.slider-nav');
for (let i = 0; i <inputs.length ; i++)
{
    inputs[i].addEventListener('click', () => {
        let SI = document.querySelector(".slider-inner");
        SI.style.left = -i*100 + '%';
    })
}

const inputs=document.querySelectorAll（'.slider nav'）；
for（设i=0；i{
设SI=document.querySelector（“.slider-inner”）；
SI.style.left=-i*100+'%'；
})
}

它们是伪类。您不直接添加它们，而是根据元素的状态进行匹配。在这种情况下，您当然只需添加

checked

属性？@jamiechi。谢谢你的回答。正如您从CSS代码中看到的，我应该更改“left”属性，这取决于用户从哪个收音机检查。是的，所以取决于它是第一个还是第二个检查项应该工作。您为什么需要这样做？这是一个滑块。我想要自动化的过程。我想添加HTML输入标记，但不想更改CSS文件中的任何内容。简而言之，如果我添加输入，我应该为每个输入获得适当数量的伪类。我想得到左边：每个伪类的NNN%。

const inputs = document.querySelectorAll('.slider-nav');
for (let i = 0; i <inputs.length ; i++)
{
    inputs[i].addEventListener('click', () => {
        let SI = document.querySelector(".slider-inner");
        SI.style.left = -i*100 + '%';
    })
}