html代码部分
<button>A-1</button>
<button>B-2</button>
<button>C-3</button>
<button>D-4</button>
<button>E-5</button>
js代码部分
方法一:
//减少代码量
var btns = document.querySelectorAll('button');
for(var i = 0;i < btns.length;i ++){
(function(index){
btns[index].onclick = function(e){
console.log(index);
}
})(i);
}
方法二:
//便于理解
var btns = document.querySelectorAll('button');
for(var i = 0;i < btns.length;i ++){
btns[i].onclick = function(){
var index = searchIndex(this);
console.log(index);
}
function searchIndex(navitem){
for(var i=0;i<btns.length;i++){
var index = -1;
if(btns[i] == navitem){
index = i;
break;
}
}
return index;
}
}