jQuery循环中递增选择器名称失效，求正确实现方法

嘿，我懂你碰到的这个问题——这是JavaScript循环里闭包的经典坑！当你的点击事件真正触发时，循环里的变量x早已经跑完整个循环变成7了，所以所有点击事件都会试图去操作.deal7，完全不是你想要的.deal1到.deal6效果。下面给你几个实用的解决办法：

方法1：用ES6的let（最简单现代的方式） #

let在循环里是块级作用域，每一次循环迭代都会创建一个独立的x变量，这样点击事件里的x就能正确对应当前循环的数值：

var deal = [];
for (let x = 1; x <= 6; x++) {
  deal[x] = jQuery(`.deal${x}`).click(function(){
    jQuery(`.deal${x}`).toggleClass('open');
  });
}

方法2：用闭包包裹（兼容旧浏览器） #

如果需要兼容不支持ES6的环境，可以用立即执行函数（IIFE）创建闭包，把当前循环的x值保存下来：

var deal = [];
for (var x = 1; x <= 6; x++) {
  // 用立即执行函数捕获当前的x值
  (function(currentX) {
    deal[currentX] = jQuery('.deal' + currentX).click(function(){
      jQuery('.deal' + currentX).toggleClass('open');
    });
  })(x);
}

方法3：利用事件里的this（最优雅简洁） #

其实你完全不需要依赖循环变量，因为点击事件触发时，this就指向被点击的.dealx元素，直接操作它就行：

// 批量绑定所有以deal开头的元素
jQuery('[class^="deal"]').click(function() {
  jQuery(this).toggleClass('open');
});

// 如果只想精准匹配deal1到deal6，可以加上范围限制
jQuery('[class^="deal"]').filter(function() {
  var num = parseInt(this.className.match(/deal(\d+)/)[1], 10);
  return num >=1 && num <=6;
}).click(function() {
  jQuery(this).toggleClass('open');
});

这种方法不仅避免了闭包问题，代码也更简洁，还不用维护额外的数组。

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