如何修复点击innerMainImg类图片切换多张图片的功能问题？

我正在创建一个网页，其中有一个包含img标签的div，该img标签的class为innerMainImg。项目中images文件夹内有四张图片：prot1.jpg、prot2.jpg、prot3.jpg、prot4.jpg。我尝试给innerMainImg添加点击事件监听器，实现点击时依次切换图片，但代码无法正常工作，该如何修复？

原代码：

var imgNumber = 1;

for(i = 1; i < 5; i++){
    imgNumber = i;
    var actualImage = "images/prot" + imgNumber + ".jpg";

    document.querySelector("#mainImg .innerMainImg").addEventListener("click", imgNext);
    function imgNext(){
        document.querySelector("#mainImg .innerMainImg").setAttribute("src", actualImage);
    };
}

问题分析 #

• 循环里给同一个图片元素重复绑定了4次点击事件，每次点击会触发4次回调，完全冗余。
• 由于JS闭包特性，actualImage最终会保留循环最后一次的值（images/prot4.jpg），导致点击后只会切换到最后一张图。
• 核心逻辑错误：绑定事件不需要循环，应该在点击回调内部控制图片序号的递增与循环。

修复后的代码 #

// 提前获取图片元素，避免每次点击重复查询DOM
const imgElement = document.querySelector("#mainImg .innerMainImg");
let imgNumber = 1;

// 只绑定一次点击事件
imgElement.addEventListener("click", function() {
    // 序号递增，超过4就重置为1，实现循环切换
    imgNumber = imgNumber % 4 + 1;
    // 拼接新图片路径
    const actualImage = `images/prot${imgNumber}.jpg`;
    // 更新图片src
    imgElement.src = actualImage;
});

修复说明 #

• 提前获取DOM元素，减少重复查询的性能消耗。
• 只绑定一次点击事件，避免重复绑定导致的冗余触发。
• 用let声明序号变量，保证块级作用域，避免全局变量污染。
• 用取模运算%实现序号在1-4之间循环，点击到第4张后，下一次会回到第1张。
• 直接用imgElement.src替代setAttribute，更简洁且符合图片元素的属性操作规范。

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