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

【问题标题】：Dynamicaly add selector for class with JavaScript使用 JavaScript 为类动态添加选择器
【发布时间】：2019-11-07 15:42:05
【问题描述】：

如何使用原生 JavaScript 为每个复选框动态添加 :checked:nth-of-type 选择器？

我试过这个。 HTML

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

CSS 中的静态选择器

.slider-nav:checked:nth-of-type(1) ~ .slider-inner {
      left: 0%;
    }

.slider-nav:checked:nth-of-type(2) ~ .slider-inner {
      left: -100%;
    }

.slider-inner {
    position: absolute;
    top: 0;
    left: 0;
}

我的想法是用JS动态添加slider-nav:checked:nth-of-type(NN)~.slider-inner

所以，在 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?
    }
});

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

【问题讨论】：

它们是伪类。您不直接添加它们，它们由于元素的状态而匹配。在这种情况下，您肯定只需添加 checked 属性吗？
@Jamiec 嗨。谢谢你的回答。正如您从 CSS 代码中看到的那样，我应该更改“left”属性取决于用户检查的收音机。
是的，所以取决于它应该工作的第一个或第二个检查项目。
为什么需要这样做？
这是一个滑块。我想要自动化过程。我想添加 HTML 输入标签，并且不想更改 CSS 文件中的任何内容。很快，如果我添加输入，我应该为每个输入获得适当数量的伪类。我想离开：每个伪类的 NNN%。

标签： javascript css ecmascript-6

【解决方案1】：

那些以: 开头的选择器是CSS pseudo-classes，因此您不要直接添加它们；它们的应用取决于匹配元素的状态或位置（等）。

我在下面简化了您的示例来证明这一点。根据复选框是否处于checked 状态（:checked）以及它是第一个还是第二个（:nth-of-type(1) 或nth-of-type(2)）控制span 跟随它们的颜色。

.slider-nav:checked:nth-of-type(1) ~ .slider-inner {
  background-color:red
}

.slider-nav:checked:nth-of-type(2) ~ .slider-inner {
  background-color:blue
}

.slider-inner{
  background-color:magenta
}

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

【讨论】：

【解决方案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 + '%';
    })
}

【讨论】：