以下代码中 aBtn[i].style.background = 'red'; 为啥不能用oBtn[i] 替代 this

Question

 <script>
window.onload = function () {
var aBtn = document.getElementsByTagName('input');
for(var i=0; i<aBtn.length; i++){
aBtn[i].onclick = function () {
aBtn[i].style.background = 'red';
};
}
};
</script> 

这句话中 aBtn[i].style.background = 'red'; 为啥不能用oBtn[i] 替代 this

Answer 1

因为闭包，说起来就复杂了。aBtn[i].onclick = function () {   aBtn[i].style.background = 'red';};这个匿名function里面的变量 i 跟外层的 for(var i=0; i<aBtn.length; i++) 中的 i 是同一个。而且，这个i在for循环里自增到aBtn.length这个值了。然后，i就一直就是 aBtn.length 的值。

Answer 2

将代码aBtn[i].style.background = 'red';改为 aBtn[i-1].style.background = 'red'; 以后,第三个按钮会变成红色, 所以i的值最后是3.  for 循环只是起到给每个btn加事件的效果. 点击这个事件触发时候for 已经循环完了, i的值是3, 那么就变成了aBtn[3]这个按钮变红,但是这个按钮并不存在,所以三个按钮没有一个有反应的. 但是改为i-1 后 .最后一个按钮就变红了.end.3ku.all

Answer 3

循环体中只是定义了onclick的回调函数，并不会执行，当次循环体执行完时i===aBtn.length，所以不能使用。但是this关键字代表的是触发click事件的element，是正确的。如果你不想用this,我把代码改成如下，跟this效果是一样的：for(var i=0; i<aBtn.length; i++){ var index = i; aBtn[i].onclick = function (index) { aBtn[index].style.background = 'red'; };新加变量index只是为了让你更加明确。更推荐你使用this

Answer 4

你这里没有明确指定this是代表什么如果这样$("input").click(funciton(){$(this)})这个时候用this的时候，this就是代表点击input标签，但是你上面只是把input定义了变量，用this就会不知道是用什么this