Javascript 添加活动类的滑块

晚上好，我有一个滑球。它通过添加活动类来更改背景。 我可以在块中添加类“.active”，但我不能删除类“.active”，在块中我不需要它。它需要在类“slider\uu image”中最多有一个类“active”。 那么我如何才能正确地删除这个“.active”类呢？希望对你有所帮助！多谢各位

let sliderImage=document.queryselectoral（'.slider\uu image'）；
让sliderActiveImage=document.querySelectorAll（'.slider\uu image.active'）；
让sliderBtn=document.querySelectorAll（“.slider-button”）；
for（设i=0；i{
if（幻灯片图像[i]！=元素）{
幻灯片图像[i].classList.add（“活动”）；
}
});
});
}

滑块{
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
位置：相对位置；
边缘顶端：40px；
边界半径：25px；
高度：400px；
宽度：900px；
&__形象{
位置：绝对位置；
边界半径：继承；
宽度：100%；
身高：100%；
不透明度：0；
转化：translateX（100%）；
背景位置：中心；
背景尺寸：封面；
过渡：变换0.5s缓进输出，不透明度0.5s线性；
img{
宽度：100%；
身高：100%；
边界半径：继承；
}
&.主动{
不透明度：1；
转化：translateX（0%）；
}
}
.滑块基站{
边缘底部：15px；
z指数：9999；
标签{
利润率：0.20px；
边缘底部：15px；
位置：相对位置；
&：：之前{
位置：绝对位置；
内容：“；
宽度：10px；
高度：10px；
显示：内联块；
背景色：#fff；
光标：指针；
边界半径：100%；
}
}
输入{
显示：无；
&：选中+标签：：之前{
过渡：0.2s缓进；
宽度：20px；
边界半径：8px；
背景颜色：黄色；
}
}
}
}

---

我相信有更好的方法可以通过数据属性来实现这一点，不过我已经用您的示例发布了我的解决方案。因为在任何时候只有一个活动元素，所以您不需要查询选择所有活动图像。相反，您可以简化，首先只选择活动图像，然后在每个按钮上单击“开始”，将其删除。然后将活动类添加到

幻灯片图像[i]

并重置

幻灯片活动图像。希望这有帮助

这里有一个链接来告诉你我的意思


将您的JS替换为：

let sliderImage = document.querySelectorAll('.slider__image');
let sliderActiveImage = document.querySelector('.slider__image.active');
let sliderBtn = document.querySelectorAll('.slider-button');

for(let i = 0; i < sliderBtn.length; i++){
    sliderBtn[i].addEventListener("click", function(){
        sliderActiveImage.classList.remove('active')
        sliderImage[i].classList.add("active");
        sliderActiveImage = sliderImage[i]
    });
}

let sliderImage=document.queryselectoral（'.slider\uu image'）；
让sliderActiveImage=document.querySelector（'.slider\uu image.active'）；
让sliderBtn=document.querySelectorAll（“.slider-button”）；
for（设i=0；i