javascript - 在jQuery中循环一个按钮点击事件

Question

这个循环似乎不起作用，我不确定我哪里出错了，但希望得到任何帮助。

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

基本上在点击按钮时它应该提醒循环达到的数字(对吗？)但它只是在每个数字上提醒“10”？

已经晚了，我知道我一定做错了什么，但我想不出是什么。

这是我循环的一个 fiddle : https://jsfiddle.net/p8v5sejr/

Answer 1

关于函数作用域和 block 作用域

只需在for循环中使用let声明i

// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) { // <-- use let
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>