JavaScript循环生成具有不同值的JavaScript函数[重复]

Question

我的 DOM 上有单独的元素，ID 为“inner_1”到“inner_20” 例如inner_1、inner_2、inner_3 等。

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

我的 .js 文件中的循环

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

输出

=> "Hooray!21"

对于我点击的每个元素，无论是“inner_1”还是“inner_15”。

如何让它为每个功能显示正确的数字，例如“inner_14”将有“14”的警报

谢谢！

Answer 1

输出将始终是“万岁！21”，因为这是调用点击处理程序时section 的值。 for 循环将已经完成迭代，导致 section 在 21 中“修复”。改为尝试这个

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

Answer 2

循环似乎没有必要。尝试使用以选择器开头的属性

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

Answer 3

考虑重构代码，如果您使用的是 jQuery，那么只需为所有元素委托一个 事件处理程序，因此，您可以避免创建大量执行相同操作的事件处理程序。

考虑以下结构：

<section class="parent-section">
    <div id="inner_1">1</div>
    <div id="inner_2">2</div>
    <div id="inner_3">3</div>
</section>

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

$(".parent-section").on("click", "[id^='inner_']", function(e) {
    e.preventDefault();
    var item = this.id.match(/\d+$/);
    if (!item) { return; }
    alert(item[0]);
});

这样您将在内存优化方面得到改进，因为只有一个事件处理程序会处理所有子元素中的点击事件。