Javascript只处理多个组件中的一个组件

我有一个小的javascript滑块

更改单选按钮上单击时的幻灯片事件：

const sliders=document.queryselectoral（'ul.slider'）；
sliders.forEach（slider=>{
const slides=slider.querySelectorAll（'.figure'）；
const controlls=slider.querySelectorAll（'.controller'）；
常数幻灯片速度=2000；
设currentSlide=0；
document.addEventListener（'input'，（e）=>{
if（例如target.getAttribute（'name'）=“controller”）
nextSlide（即目标值）；
});
});

现在我的页面上有两个组件/滑块，当我单击第一个滑块的单选按钮时，第二个滑块也会更改，即使我将其放在forEach中，是否有更好的方法来实现这一点

我无法更改slider的ID类，因为它是一个动态网站

---

请仅回答问题，谢谢：）

您的问题可能发生了，因为您在

文档中添加了事件侦听器，这意味着它侦听的事件适用于整个DOM树。任何
oninput
调用都将触发事件侦听器。与其将其添加到
文档
对象，我建议您在本地添加它

const sliders=document.queryselectoral（'ul.slider'）；
用于（滑块中的滑块）{
const slides=slider.querySelectorAll（'.figure'）；
const controlls=slider.querySelectorAll（'.slider\uuuu controller\uuuu radio'）；
常数幻灯片速度=2000；
const sliderControllers=slider.getElementsByName（“slider_控制器”）；
设currentSlide=0；
用于（滑动控制器的控制器）{
controller.addEventListener（'输入'，（索引）=>{
幻灯片[currentSlide]。类名='figure'；
当前幻灯片=索引%slides.length；
控件[currentSlide]。选中=真；
幻灯片[currentSlide].className='figure visible'；
}，假）；
}
}
谢谢，它现在可以工作了，但是当我在另一个滑块上单击单选按钮时，单选按钮会从一个滑块上取消选中，对此有什么想法吗？这可能是因为它们都具有相同的
名称
属性，这意味着它们被视为可供选择的选项，因此在任何给定时间只能选中一个。