有5个按钮:
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
一、var定义变量的方法:
var btns=document.querySelectorAll('button');
for(var i = 0;i<btns.length;i++){
btns[i].οnclick=function(){
alert('点击了第'+i+'个按钮');
}
}
点击按钮后弹出的都是第4个,原因是var定义变量i作用域造成的。
解决方法:
(1)、let定义变量的方法:
let btns=document.querySelectorAll('button');
for(let i = 0;i<btns.length;i++){
btns[i].οnclick=function(){
alert('点击了第'+i+'个按钮');
}
}
以上写法在IE浏览区不支持,其他的浏览器支持,点击按钮能取到需要的值。
(2)、var定义变量的方法:
var btns=document.querySelectorAll('button');
for(var i = 0;i<btns.length;i++){
(function(i){
btns[i].οnclick=function(){
alert('点击了第'+i+'个按钮');
}
})(i);
}
以上写法支持IE浏览器