使用javascript更改图像幻灯片中的点样式

我有一组三个圆点，当它是当前的圆点时，应该会改变样式，因此它会比其他圆点变暗，我发现解决方案有点可行，但我不明白为什么它不能正常工作。 我用谷歌搜索过其他方法，但现在我正试图理解为什么我写的代码以一种有趣的方式工作

代码在这里

JS
dots.forEach（函数（el，索引）{
el.addEventListener（“单击”，函数（）{
const esta=这个；
const target=newdots.findIndex（函数（num）{
returnnum==esta；
})
slides.style.transform=“translateX（“+（-size*target）+”px”；
slides.style.transition=“transform.5s”；
document.querySelector（“.current”）.classList.remove（“current”）；
这个.classList.add（“当前”）；
})
})

---

多亏了一百万

Hi@peter，我试着运行了你的Codepen链接，当前的类被正确地应用到了活动幻灯片上。你能解释一下问题是什么吗？你可以在

上使用
边框：无
和
大纲：无
属性。botao

类使点更加可见。嘿@Akansh当我第一次打开我的时候t选择第一个点（默认情况下应用当前样式）当我点击第二个按钮时，第一个和第二个按钮都会显示当前的样式，而当我点击第三个按钮时，第二个和第三个按钮会显示当前的样式。因此，只有在点击每个按钮数次后，代码才显示正常工作，但一开始我总是会显示两个当前样式的按钮hi@peter，我尝试了running您的代码笔链接和当前的

类被正确地应用于活动幻灯片。您能解释更多问题吗？您可以使用
边框：无
和
大纲：无
属性在
上。botao
类使点更可见。嘿@Akansh当我第一次打开它时，第一个点被选中（默认情况下，它应用了当前样式）当我单击第二个按钮时，第一个和第二个按钮都会获得当前样式，而当我单击第三个按钮时，第二个和第三个按钮会应用当前样式。因此，只有在多次单击每个按钮后，代码才会正常工作，但在开始时，我始终会获得两个具有当前样式的按钮
        <button class="botao current"></button>
        <button class="botao"></button>
        <button class="botao"></button>
    </div>

JS
dots.forEach(function(el, index){

    el.addEventListener("click",function(){

        const esta = this;
        const target = newdots.findIndex(function(num){
            return num === esta;
        })

        slides.style.transform = "translateX(" + ( - size * target) + "px";
        slides.style.transition = "transform .5s";

        document.querySelector(".current").classList.remove("current");
        this.classList.add("current");

    })
})