使用for循环批量绑定100个BTN点击事件切换对应IMG状态问题求助

问题原因 #

你遇到的问题和嵌套for循环无关，属于经典的循环变量闭包捕获问题：

• 你没有给循环变量a设置块级作用域，所有按钮的点击回调函数捕获的都是同一个全局作用域下的a变量
• 点击事件触发时，整个for循环早已执行完毕，此时a的值已经固定为循环结束后的101，自然找不到对应编号的.btn_101和.img_101元素，所以特定图片切换的逻辑不生效。

修复方案 #

方案1：ES6+ 块级作用域修复（最简方案） #

只需要将循环变量的声明改为let即可，let会为每一轮循环创建独立的块级作用域，每个回调捕获的都是当前轮次的a值：

// 注意循环变量用let声明
for(let a=1; a<=100; a++) {
    $(".btn_" + a).click(function() {
        // 重置所有图片为a后缀版本
        for(let i=1; i<=100; i++) {
            $(".img_" + i).attr("src","image-" + i + "-a.gif");
        };
        // 重置所有按钮文本为初始状态
        $("[class^='btn_']").text("Play animation");
        // 设置当前按钮和对应图片的激活状态
        $(this).text("Pause animation");
        $(".img_" + a).attr("src","image-" + a + "-b.gif");
    });
};

方案2：ES5 兼容修复（无需ES6支持） #

如果需要兼容不支持ES6的老旧环境，可以用立即执行函数（IIFE）封闭每一轮的变量作用域，显式将当前编号传入回调：

for(var a=1; a<=100; a++) {
    // 用IIFE封闭当前轮次的编号值
    (function(currentIndex) {
        $(".btn_" + currentIndex).click(function() {
            // 重置所有图片
            for(var i=1; i<=100; i++) {
                $(".img_" + i).attr("src","image-" + i + "-a.gif");
            };
            // 重置所有按钮
            $("[class^='btn_']").text("Play animation");
            // 设置当前状态
            $(this).text("Pause animation");
            $(".img_" + currentIndex).attr("src","image-" + currentIndex + "-b.gif");
        });
    })(a);
};

方案3：性能优化版（事件委托，无需循环绑定事件） #

更推荐的实现方式，只需要绑定1次事件到公共父元素，不需要循环绑定100个事件，性能更好，后续新增按钮也无需修改JS代码：
首先给所有按钮加公共类control-btn和data-index属性存储对应图片编号，示例HTML结构：

<!-- 每组按钮和图片的结构示例 -->
<button class="control-btn btn_1" data-index="1">Play animation</button>
<img class="img_1" src="image-1-a.gif" alt="">

对应的JS代码：

// 建议把事件绑定到按钮的最近公共父元素，这里用document做示例
$(document).on('click', '.control-btn', function() {
    const currentIndex = $(this).data('index');
    // 重置所有图片为默认状态
    $('[class^="img_"]').each(function() {
        const idx = $(this).attr('class').split('_')[1];
        $(this).attr('src', `image-${idx}-a.gif`);
    });
    // 重置所有按钮文本
    $('.control-btn').text('Play animation');
    // 设置当前选中项的激活状态
    $(this).text('Pause animation');
    $(`.img_${currentIndex}`).attr('src', `image-${currentIndex}-b.gif`);
});

额外功能：同按钮切换播放/暂停状态 #

如果需要实现点击当前激活的按钮可以切换回暂停状态，只需要加一层状态判断即可：

$(document).on('click', '.control-btn', function() {
    const currentIndex = $(this).data('index');
    const isActive = $(this).text() === 'Pause animation';
    // 如果点击的是已经激活的按钮，直接切回暂停
    if (isActive) {
        $(this).text('Play animation');
        $(`.img_${currentIndex}`).attr('src', `image-${currentIndex}-a.gif`);
        return;
    }
    // 否则正常切换激活状态
    $('[class^="img_"]').each(function() {
        const idx = $(this).attr('class').split('_')[1];
        $(this).attr('src', `image-${idx}-a.gif`);
    });
    $('.control-btn').text('Play animation');
    $(this).text('Pause animation');
    $(`.img_${currentIndex}`).attr('src', `image-${currentIndex}-b.gif`);
});

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