js實現點選標籤彈出其索引值
阿新 • • 發佈：2019-02-19
據說這是一道筆試題，以下是程式碼，沒什麼要文字敘述的，就是點選哪個<li>彈出哪個<li>的索引值即可：
<html> <head> <style> li{ width:50px; height:30px; margin:5px; float:left; text-align: center; line-height: 30px; border-radius:4px; list-style-type: none; background: red; cursor:pointer; } </style> <script> window.onload=function(){ //此處有三種方法 }; </script> <head> <body> <div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> </div> </body> </html>
第一種：
var oli=document.getElementsByTagName('li');
for(var i=0; i<oli.length;i++)
{
oli[i].index=i;
oli[i].onclick=function(){
alert('你點選的列表的下標是：'+this.index);//列表下標從0開始
};
}除此之外還有別的方法：
或者：var oli=document.getElementsByTagName('li'); for(var i=0;i<oli.length;i++) { oli[i].onclick=(function(n){ return function(){ alert(n); } })(i) }
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
(function(n){
oli[i].onclick=function(){
alert(n);
}
})(i)
}效果：
點選“列表4”彈出：
