编写JavaScript图片缩放类时所有页面图片同步缩放问题求助

核心问题点 #

• 没有区分触发操作的目标图片：你编写的agrandir方法会遍历所有匹配到的图片元素统一切换类，自然会出现所有图片同步缩放的问题。
• 类名判断逻辑错误：classList是DOMTokenList类型的对象，不是字符串，直接和字符串做相等判断永远返回false，原有条件判断完全不会按预期生效。
• 元素收集逻辑存在冗余：document.getElementsByClassName返回的是动态的HTMLCollection集合，你每次调用agrandir都往this.images数组中追加元素，多次调用后数组会出现大量重复元素，额外消耗性能。

修复后的代码示例 #

class ImageZoom {
    constructor() {
        // 初始化时绑定所有缩略图的点击事件
        this.bindEvents();
    }

    bindEvents() {
        const petiteImages = document.querySelectorAll(".image_petite");
        petiteImages.forEach(img => {
            // 点击单张图片时只切换当前图片的类
            img.addEventListener('click', () => this.toggleZoom(img));
        });
    }

    toggleZoom(targetImg) {
        if (targetImg.classList.contains("image_petite")) { 
            targetImg.classList.remove('image_petite');
            targetImg.classList.add('image_grande');
        } else if (targetImg.classList.contains("image_grande")) {
            targetImg.classList.remove('image_grande');
            targetImg.classList.add('image_petite');
        }
    }
}

let imageZoom = new ImageZoom();

补充说明 #

• 类名从Image改成ImageZoom是为了避免和原生的Image构造函数冲突，防止出现不可预期的错误。
• 修复后点击哪张图片就只会切换对应图片的缩放状态，不会影响其他图片。

内容的提问来源于stack exchange，提问作者Pol Vunak