Javascript манипулирование только 1 компонентом из нескольких

Question

У меня есть небольшой слайдер javascript.

Это изменяет слайды при событии щелчка на переключателях:

const sliders = document.querySelectorAll('ul.slider');
sliders.forEach(slider => {
    const slides = slider.querySelectorAll('.figure');
    const controlls = slider.querySelectorAll('.controller');
    const slideshowSpeed = 2000;
    let currentSlide = 0;
    
    document.addEventListener('input',(e)=>{
        if(e.target.getAttribute('name')=="controller")
            nextSlide(e.target.value);
    });
    
  
});

Теперь у меня есть 2 компонента / ползунка на моей странице и когда я нажимаю переключатель 1-го ползунка, второй также изменяется, хотя я помещаю его в forEach, есть ли лучший способ подойти к этому?

Я не могу изменить классы идентификаторов ползунка как это сайт Dynami c.

Пожалуйста, только vanilla JS ответы, спасибо :)

Answer 1

Возможно, ваша проблема возникла из-за того, что вы добавили прослушиватель событий в document, то есть события, которые он прослушивает, применяются ко всему дереву DOM. Любой вызов oninput запустит прослушиватель событий. Вместо того, чтобы добавлять его к объекту document, я рекомендую вам добавить его локально.

const sliders = document.querySelectorAll('ul.slider');

for (slider of sliders) {
    const slides = slider.querySelectorAll('.figure');
    const controlls = slider.querySelectorAll('.slider__controller__radio');
    const slideshowSpeed = 2000;
    const sliderControllers = slider.getElementsByName("slider_controller");
    let currentSlide = 0;

    for (controller of sliderControllers) {
        controller.addEventListener('input', (index) => {
            slides[currentSlide].className = 'figure';
            currentSlide = index % slides.length;
            controlls[currentSlide].checked=true;
            slides[currentSlide].className = 'figure visible';
        }, false);
    }
}