1. 程式人生 > >js實現點選標籤彈出其索引值

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”彈出: