js實現點選<li>標籤彈出其索引值

勤勞的插秧哥發表於2014-10-31
JS索引

據說這是一道筆試題，以下是程式碼，沒什麼要文字敘述的，就是點選哪個<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”彈出：



相關文章