点击缩略图切换大小功能异常：仅能放大无法缩小

你尝试实现点击缩略图放大、再次点击缩小的功能，但当前仅能放大无法缩小，核心问题出在JavaScript的逻辑顺序和事件绑定方式上。

原代码问题拆解 #

1. DOM加载完成后，你先给缩略图绑定了点击事件（清空类名），紧接着的if判断是一次性执行的（仅在DOM加载时运行一次），而非点击触发时动态判断状态。
2. 初始绑定的点击事件被后续代码直接覆盖，导致第一次点击清空类名后，后续点击只会执行重新绑定的“设置small类”逻辑，无法实现切换。

正确实现方式 #

推荐使用classList.toggle()方法，它可以直接切换元素的类名，完美适配这种点击切换状态的场景：

document.addEventListener("DOMContentLoaded", () => {
    let thumbnail = document.getElementById("smart_thumbnail");
    thumbnail.onclick = () => {
        // 切换small类：存在则移除，不存在则添加
        thumbnail.classList.toggle("small");
    }
});

如果偏好手动判断类名的写法，也可以用以下代码：

document.addEventListener("DOMContentLoaded", () => {
    let thumbnail = document.getElementById("smart_thumbnail");
    thumbnail.onclick = () => {
        if (thumbnail.classList.contains("small")) {
            thumbnail.classList.remove("small");
        } else {
            thumbnail.classList.add("small");
        }
    }
});

内容的提问来源于stack exchange，提问作者Mustafa Legrand