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

2024-06-08 • 问答

如何使用本机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动态添加slide-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的初学者。

以:开头的那些选择器是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>

我找到了决定。感谢@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 + '%';
    })
}

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

yjr1119 回答：使用JavaScript动态添加类的选择器

大家都在问