1.html的基本結構:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
2.js實現部分:
1.使用立即執行函數
var liList = document.getElementsByTagName('li')
for (var i = 0; i < liList.length; i++) {
(function(i){
liList[i].onclick = function(){
console.log(i)
}
})(i)
};
2.使用ES6的let
var liList = document.getElementsByTagName('li')
for (let i = 0; i < liList.length; i++) {
liList[i].onclick = function(){
console.log(i)
}
};
3.forEach實現
var liList = document.getElementsByTagName('li')
var liArr = [].slice.call(liList)//將liList這個類數組轉化成數組,forEach只能遍歷數組
liArr.forEach(function(ele,i){
ele.onclick = function(){ console.log(i) }
})
4.call方法,這個是查看forEach 的pollfill想出來的
var liList = document.getElementsByTagName('li')
function fun(idx){
this.onclick = function(){ console.log(idx) }
}
for (var i = 0; i < liList.length; i++) {
fun.call(liList[i],i)
};