同一页面同class双滑块异常：点击首滑块操控次滑块

问题根源 #

你的代码核心问题是单个Slider实例共享了所有滑块的状态。在forEach循环遍历.slider元素时，每次迭代都会覆盖类实例的this.slides、this.current等属性，循环结束后这些属性仅指向最后一个滑块的DOM元素。因此，所有按钮的点击事件最终都会操控最后一个滑块。

解决方案：将Slider改为单滑块控制器 #

重构类结构，让每个Slider实例只负责单个滑块的逻辑，为页面中的每个.slider元素创建独立的实例，确保状态互不干扰。

修改后的TypeScript代码 #

export default class Slider {
    private slider: HTMLElement;
    private slides: HTMLElement;
    private current: Element;
    private caption: HTMLElement;
    private prev: Element;
    private next: Element;

    constructor(sliderElement: HTMLElement) {
        this.slider = sliderElement;
        this.slides = sliderElement.querySelector('.slider__inner') as HTMLElement;
        
        // 绑定当前滑块的按钮事件
        const prevButton = sliderElement.querySelector('.slider__controls-prev') as HTMLSpanElement;
        const nextButton = sliderElement.querySelector('.slider__controls-next') as HTMLSpanElement;
        
        prevButton.addEventListener('click', () => this.move('prev'));
        nextButton.addEventListener('click', () => this.move());

        this.init();
        this.applyClasses();
        this.setCaption();
    }

    private init(): void {
        // 初始化当前滑块的状态
        this.current = this.slider.querySelector('.slider__item-current') || this.slides.firstElementChild as Element;
        this.caption = this.slider.querySelector('.slider__item-caption') as HTMLElement;
        this.prev = this.current.previousElementSibling || this.slides.lastElementChild as Element;
        this.next = this.current.nextElementSibling || this.slides.firstElementChild as Element;
    }

    private applyClasses(): void {
        // 为当前滑块的元素添加状态类
        this.current.classList.add('slider__item-current');
        this.prev.classList.add('slider__item-prev');
        this.next.classList.add('slider__item-next');
    }

    private setCaption(): void {
        // 更新当前滑块的标题
        this.caption.textContent = this.current.querySelector('figcaption')?.textContent || '';
    }

    private move(direction?: string): void {
        const classesToRemove = ['slider__item-prev', 'slider__item-current', 'slider__item-next'];
        this.prev.classList.remove(...classesToRemove);
        this.current.classList.remove(...classesToRemove);
        this.next.classList.remove(...classesToRemove);

        // 根据方向更新滑块状态
        if (direction === 'prev') {
            [this.prev, this.current, this.next] = [
                this.prev.previousElementSibling || this.slides.lastElementChild as Element,
                this.prev,
                this.current
            ];
        } else {
            [this.prev, this.current, this.next] = [
                this.current,
                this.next,
                this.next.nextElementSibling || this.slides.firstElementChild as Element
            ];
        }

        this.applyClasses();
        this.setCaption();
    }
}

// 页面加载完成后初始化所有滑块
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.slider').forEach(slider => new Slider(slider as HTMLElement));
});

关键修改点 #

1. 构造函数接收单个滑块元素：每个Slider实例仅管理一个滑块，状态完全独立
2. 实例属性私有化：避免外部干扰，确保每个实例的状态只对应自身滑块
3. 独立初始化逻辑：每个滑块的状态初始化、事件绑定都在实例内部完成
4. 全局初始化逻辑：在DOMContentLoaded事件中遍历所有.slider，为每个元素创建独立的Slider实例

这样修改后，每个滑块的按钮点击事件都会触发对应实例的move方法，状态不再互相覆盖，两个滑块都能正常工作。

内容的提问来源于stack exchange，提问作者jerome vermenot