JQuery循环绑定点击事件实现输入框启用功能遇阻求助

我来帮你梳理下代码里的问题，然后给出可行的解决方案~

你的代码存在的核心问题 #

1. 字符串模板语法错误：你用了$('#edit${i}')这种写法，但普通单/双引号里的${i}不会被解析成变量，会被当成字符串的一部分，jQuery会去查找id为edit${i}的元素，而不是edit1、edit2这类，这是第一个关键错误。要解析变量的话，得用**反引号`**包裹字符串（ES6模板字符串语法）。

2. 循环逻辑错误：你写的if (x < max)只会执行一次，不会循环6次，所以只会绑定第一个按钮的事件，后面的edit2到edit6都没处理到。应该用for循环来遍历1到max的数值。

3. 变量作用域陷阱：即使你改成了for循环，如果直接用i或x变量，当点击事件触发时，循环已经结束，i和x的值都会变成max（也就是6），所有按钮点击都会去操作#doc6——这是因为点击事件是异步触发的，会引用循环结束后的变量值。

修正后的可行代码 #

方法1：使用ES6的let关键字解决作用域问题 #

用let在循环里声明变量，它会在每次循环创建一个新的作用域，这样点击事件里的变量就是当前循环的数值：

$(document).ready(function () {
    var max = 6;
    // 用for循环遍历1到max的数值
    for (let i = 1; i <= max; i++) {
        $(`#edit${i}`).click(function () {
            $(`#doc${i}`).removeAttr('disabled');
        });
    }
});

方法2：用闭包捕获循环变量（兼容旧版JS） #

如果项目需要兼容不支持ES6的环境，可以用闭包来保存每次循环的变量值：

$(document).ready(function () {
    var max = 6;
    for (var i = 1; i <= max; i++) {
        // 用立即执行函数创建闭包，捕获当前的i值
        (function(currentIndex) {
            $(`#edit${currentIndex}`).click(function () {
                $(`#doc${currentIndex}`).removeAttr('disabled');
            });
        })(i);
    }
});

方法3：更优雅的方式——利用data属性关联元素 #

其实不需要依赖id的数字后缀，我们可以给每个编辑按钮加一个data-target属性，指定对应的输入框id，这样代码更灵活，就算id不是按数字排序也能生效：

<!-- 示例HTML结构 -->
<button id="edit1" data-target="#doc1">编辑1</button>
<input id="doc1" disabled>

<button id="edit2" data-target="#doc2">编辑2</button>
<input id="doc2" disabled>

对应的jQuery代码：

$(document).ready(function () {
    // 给所有编辑按钮绑定事件，不需要循环
    $('[data-target]').click(function () {
        // 获取当前按钮对应的输入框选择器
        var targetSelector = $(this).data('target');
        $(targetSelector).removeAttr('disabled');
    });
});

这种方式扩展性更好，后续新增按钮和输入框时，只要加对data-target属性，不需要修改JS代码。

验证小技巧 #

你可以在点击事件里加console.log来测试，比如：

$(`#edit${i}`).click(function () {
    console.log(`触发编辑，目标输入框：#doc${i}`);
    $(`#doc${i}`).removeAttr('disabled');
});

打开浏览器的开发者工具（F12）看控制台输出，就能知道是不是正确获取到了目标元素~

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