<body>
<!--5.下面这个ul，如何点击每一列的时候alert其index？-->
<ul id="test">
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
</body>
<script>
//第一种方式，加入index属性
/**window.onload=function(){
* var otest=document.getElementById('test');
var oli=document.getElementById('test').getElementsByTagName('li');
* for(var i=0;i<oli.length;i++){
oli[i].setAttribute('index',i);
oli[i].onclick=function(){
console.log(this.getAttribute('index'));
}
}
};*/
//方法二
/** var oli=document.getElementById('test').getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].addEventListener("click",function(e){
console.log(e.target.innerText);
console.log(e.target.index);
});
}*/
//方法3，使用闭包的方式
/** var oli=document.getElementById('test').getElementsByTagName('li');
for(var i=0;i<oli.length;i++) {
oli[i].addEventListener("click", function (num) {
return function () {
console.log(num);
}
}(i))
}*/
</script>
<body>
<!--5.下面这个ul，如何点击每一列的时候alert其index？-->
阅读背景：
点击一列显示其index的三种方法
来源：互联网
分享到：
