JavaScript循环以生成具有不同值的JavaScript函数

我在DOM上有单独的元素，ID为“inner_1”到“inner_20” e、 g.内螺纹1、内螺纹2、内螺纹3等

我创建了一个javascript循环，它将创建单独的事件侦听器函数来针对每个元素，但它为每个函数分配了错误的值

.js文件中的我的循环

for (section = 1; section < 21; section++) {
  $('#inner_'+section).click(function(event) {
    alert('Hooray!'+section);
    event.preventDefault();
  });
};

对于我单击的每个元素，不管它是“内部元素1”还是“内部元素15”

如何使其显示每个功能的正确编号，例如“内部_14”将有“14”警报

谢谢大家!

输出将始终为“Hooray！21”，因为这是调用单击处理程序时

部分的值。
for
循环将已完成迭代，从而导致
部分在21中“修复”。试试这个

for (section = 1; section < 21; section++) {
  (function(s) { 
      $('#inner_'+s).click(function(event) {
        alert('Hooray!'+s);
        event.preventDefault();
      });
  })(section);
};

for（section=1；section<21；section++）{
（职能{
$（内部事件）。单击（函数（事件）{
警报（‘万岁！’+s）；
event.preventDefault（）；
});
})（第节）；
};
循环似乎不是必需的。尝试使用以选择器开头的属性

$("[id^=inner]").click(function(e) {
  e.preventDefault()
  alert("Hooray!" + this.id.split("_")[1])
})

在重构代码时，如果您使用jQuery，那么只为所有元素委派一个事件处理程序，因此，您可以避免创建许多将执行相同操作的事件处理程序

考虑以下结构：


1.
2.
3.

现在我们将把事件处理程序委托给父元素，这样只会创建一个事件处理程序：

$（“.parent section”）。在（“click”、“[id^='internal_']”上，函数（e）{
e、 预防默认值（）；
var item=this.id.match（/\d+$/）；
如果（！item）{return；}
警报（项目[0]）；
});

通过这种方式，您将在内存优化方面得到改进，因为只有一个事件处理程序将处理所有子元素中的单击事件。
非常干净。这比以编程方式生成21个匿名函数更可取。哇，这真是太神奇了！我选择了Griffith的答案，因为它定义了为什么我的循环不起作用，但我将使用这段代码！令人惊叹的！非常感谢。是的，这绝对是一个改进的代码。不需要创建一个新的作用域，只需将数据传递给事件：
$（“#internal"+s）。在（“click”、{index:s}上，函数（e）{alert（e.data.index）；}）
interest。。是否有您推荐的特定源代码，以便我学习更多JavaScript？：-）除了答案，考虑一个真正的简单解决方案，即<代码>。（让section=
更基本地说，使用构造的ID作为处理DOM元素的方法是一种反模式。你将用一生的时间做字符串算术来创建ID，然后在DOM中跟踪它们，然后在某些情况下再次分离ID。例如，识别
inne就更好了r
元素，然后用
getElementsByClassName
或
querySelectorAll
获取所有元素，然后循环结果添加事件侦听器。哇，这项技术对我来说将是无价的！这种想法将有助于我成为一名更好的开发人员！！谢谢你的提示和指导杜鹃花！
$("[id^=inner]").click(function(e) {
  e.preventDefault()
  alert("Hooray!" + this.id.split("_")[1])
})