如何实现双变量递增至指定值？jQuery批量绑定事件需求

嘿，这事儿太好办了——你完全不用重复写十几遍相同的事件绑定逻辑，一个简单的循环就能搞定，还能避开常见的闭包陷阱。

核心思路 #

观察你的变量规律：i从1到15，x从13到27（如果要到28的话，i需要到16），两者的差值是固定的：x = i + 12。我们可以利用这个规律，用循环遍历i的范围，动态生成选择器并绑定事件。

方法一：从元素ID提取变量（避免闭包陷阱） #

这种方法不需要额外的闭包处理，直接从触发事件的input元素ID里提取i的值，再计算对应的x，代码更直观：

// 循环i从1到15，对应x从13到27
for (var i = 1; i <= 15; i++) {
    $('input#question14_' + i).change(function() {
        // 从当前input的ID中提取i的值
        var currentI = parseInt($(this).attr('id').replace('question14_', ''));
        var currentX = currentI + 12; // 计算对应的x
        
        // 切换目标区块的显示状态
        if (this.checked) {
            $('.quiz_section.question-section-id-' + currentX).show();
        } else {
            $('.quiz_section.question-section-id-' + currentX).hide();
        }
    });
}

方法二：用立即执行函数（IIFE）保存循环变量 #

如果你更习惯直接使用循环中的i和x，可以用立即执行函数把每次循环的变量封装在独立作用域里，避免闭包陷阱（所有事件处理函数共享同一个循环变量的问题）：

for (var i = 1; i <= 15; i++) {
    var x = i + 12;
    // 用IIFE保存当前循环的i和x值
    (function(currentI, currentX) {
        $('input#question14_' + currentI).change(function() {
            if (this.checked) {
                $('.quiz_section.question-section-id-' + currentX).show();
            } else {
                $('.quiz_section.question-section-id-' + currentX).hide();
            }
        });
    })(i, x);
}

小提示 #

• 如果你需要x从13到28（共16个值），只需要把循环的结束条件改成i <= 16即可（因为16 + 12 = 28）。
• jQuery的.show()和.hide()可以替代.css('display', 'block/none')，代码更简洁易读。

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