javascript - 使用 jQuery .on() 确定范围

Question

这个问题已经有答案了:

How to generate event handlers with loop in Javascript? [duplicate] (3 个回答)

已关闭 7 年前。

这周必须做一些 UI 工作...我不习惯!基本上，我有一个对象数组(在本例中简化为整数)，需要循环遍历它们以在页面上找到匹配的元素，并使用数组该部分的数据附加一个事件处理程序。我认为这是一个范围问题 - 然后我尝试分配 _local = this;循环中的最后一个项目似乎总是附加到处理程序(即，它总是说所有按钮的最后一个值已被单击)

$(document).ready(function () {

var filters = [0,1,2,3];

// Works as expected 
// When button 0 is clicked log message is "btn0 clicked!"
// When button 1 is clicked log message is "btn1 clicked!"
// Etc

$('#btn0').on('click', function () {
    console.log("bt0 clicked");         
} );

$('#btn1').on('click', function () {
    console.log("bt1 clicked");         
} )

$('#btn2').on('click', function () {
    console.log("bt2 clicked");         
} )

$('#btn3').on('click', function () {
    console.log("bt3 clicked");         
} )



// Undefined all over the place
for (var i = 0; i < filters.length; i++) {
    $('#btn' + filters[i].toString()).on('click', function () {
        console.log("bt" + filters[i].toString() + " clicked");         
    } );
}
});

Answer 1

你是对的。您必须阅读如何closures在 JavaScript 中工作。我建议 ES6 附带一个简单的解决方案，使用 let 。另外，您不需要使用 .toString。当您使用unary plus operator时数字在幕后转换为字符串("btn"+ 1//btn1)。

  'use strict';
  var filters = [0, 1, 2, 3];
  for (let i = 0; i < filters.length; i++) {
    $('#btn' + filters[i]).on('click', function() {
      console.log("bt" + filters[i] + " clicked");
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn0'>bt0</button>
<button id='btn1'>bt1</button>
<button id='btn2'>bt2</button>
<button id='btn3'>bt3</button>

ES6 之前，您可以创建 IIFE :

var filters = [0, 1, 2, 3];
for (var i = 0; i < filters.length; i++) {
  (function(i) {
    $('#btn' + filters[i]).on('click', function() {
      console.log("bt" + filters[i] + " clicked");
    });
  })(i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn0'>bt0</button>
<button id='btn1'>bt1</button>
<button id='btn2'>bt2</button>
<button id='btn3'>bt3</button>