点击ul下的li时alert其index值（闭包的应用）

最新推荐文章于 2022-09-03 00:31:50 发布

haojie5

最新推荐文章于 2022-09-03 00:31:50 发布

阅读量5.6k

点赞数

分类专栏：经典代码文章标签： function list

经典代码专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		</style>
	</head>
	<body>

		<ul id="test">
			<li>这是第一条</li>
			<li>这是第二条</li>
			<li>这是第三条</li>
		</ul>

		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			
			// 方法1，直接给每个li添加index属性
			var list = $("test").children;
			for(var i=0; i<list.length; i++){
				list[i].setAttribute("index", i);
				list[i].onclick = function(){
					alert(this.getAttribute("index"));
				};
			}
			
			
			// 方法2，使用闭包的方式
			var list2 = $("test").getElementsByTagName("li");
			for(var j=0;j<list2.length;j++){
				list2[j].onclick = (function(num){
					return function(){
						alert(num);
					};
				})(j);
			}
			
		</script>

	</body>
</html>

haojie5

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
点击ul下的li时alert其index值（闭包的应用）

这是第一条这是第二条这是第三条 function $(id){ return document.getElementById(id); } // 方法1，直接给每个li添加index属性 var list = $("test").children; for(var i=0; i<list.length; i++){
复制链接

扫一扫

专栏目录