jQuery循环绑定点击事件失效：仅click_1可切换对应hide_1

嘿，我来帮你排查这个问题！你的代码里有两个关键问题，咱们一个个拆解：

1. jQuery选择器错误，缺少id前缀 # #

你用$(new_A)来选择元素，但new_A是'click_1'这类id字符串，jQuery选择id元素必须加#前缀（比如$('#click_1')）。直接写$(new_A)会被当成标签选择器（试图找<click_1>这种自定义标签），根本找不到页面上的div，这是导致事件绑定失效的核心原因之一。

2. JavaScript闭包陷阱（var变量的作用域问题） #

你用var声明了new_A和new_B，但var是函数作用域变量，在整个toggle_div函数里只有一个实例。循环每次迭代都会覆盖它们的值，当click事件触发时，循环已经执行完毕，所有事件处理函数都会引用最后一次循环的new_B值（也就是'hide_2'）。这就导致不管你点哪个click_div，最终都会去toggle hide_2，而非对应的目标div。

修正后的代码方案 #

这里给你几种可行的修正方式：

方案一：用ES6的let声明变量（块级作用域）

let是块级作用域，每次循环都会创建新的变量实例，完美避开闭包陷阱，同时补上id选择器的#：

function toggle_div(id_A, id_B) {
  // 你的HTML只有1和2两个实例，循环从1到2即可
  for (let i = 1; i <= 2; i++) {
    let new_A = '#' + id_A + i;
    let new_B = '#' + id_B + i;
    $(new_A).click(function() {
      $(new_B).toggle();
    });
  }
}
toggle_div('click_', 'hide_');

方案二：用立即执行函数（IIFE）保存循环变量（兼容旧浏览器）

如果需要兼容不支持ES6的环境，可以用立即执行函数把每次循环的变量封装起来：

function toggle_div(id_A, id_B) {
  for (var i = 1; i <= 2; i++) {
    // 用IIFE把当前循环的i值保存下来
    (function(currentI) {
      var new_A = '#' + id_A + currentI;
      var new_B = '#' + id_B + currentI;
      $(new_A).click(function() {
        $(new_B).toggle();
      });
    })(i);
  }
}
toggle_div('click_', 'hide_');

方案三：更简洁的写法（无需循环）

因为你的场景只有两个元素，直接绑定事件会更直观，完全不用循环：

$('#click_1').click(function() {
  $('#hide_1').toggle();
});
$('#click_2').click(function() {
  $('#hide_2').toggle();
});

这样修改后，点击click_1就会切换hide_1的显示状态，点击click_2切换hide_2，就能正常工作啦！

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