经典的js问题 实现点击li能够弹出当前li索引与

页面导航:首页 > 网络编程 > JavaScript > 经典的js问题 实现点击li能够弹出当前li索引与

经典的js问题 实现点击li能够弹出当前li索引与

来源: 作者: 时间:2016-02-02 09:58 【

经典的js问题 实现点击li能够弹出当前li索引与innerHTML的函数点击其中一项需要alert出如下结果:按照我们平常的想法,代码应该是这样写的:var myul = document getElementsByTagName( "ul ")[0

经典的js问题 实现点击li能够弹出当前li索引与innerHTML的函数

\

点击其中一项需要alert出如下结果:

\

 

按照我们平常的想法,代码应该是这样写的:

 

var myul = document.getElementsByTagName("ul")[0];
	var list = myul.getElementsByTagName("li");

	function foo(){
		for(var i = 0, len = list.length; i < len; i++){
			list[i].onclick = function(){
				alert(i + "----" + this.innerHTML);
			}
		}
	}
	foo();
但是不巧的是产生的结果是这样的:

 

\
 

索引index为什么总是4呢,这是js中没有块级作用域导致的。这里有三种解决思路

 

1. 使用闭包

 

	<script type="text/javascript">

	var myul = document.getElementsByTagName("ul")[0];
	var list = myul.getElementsByTagName("li");

	function foo(){
		for(var i = 0, len = list.length; i < len; i++){
			var that = list[i];
			list[i].onclick = (function(k){
				var info = that.innerHTML;
				return function(){
					alert(k + "----" + info);
				};
			})(i);
		}
	}
	foo();
	</script>

 

 

2.使用ES6中的新特性let来声明变量

用let来声明的变量将具有块级作用域,很明显可以达到要求,不过需要注意的是得加个'use strict'(使用严格模式)才会生效

 

	<script type="text/javascript">

	var myul = document.getElementsByTagName("ul")[0];
	var list = myul.getElementsByTagName("li");

	function foo(){'use strict'
		for(let i = 0, len = list.length; i < len; i++){
			list[i].onclick = function(){
				alert(i + "----" + this.innerHTML);
			}
		}
	}
	foo();

	</script>

 

3.引入jquery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

 

	<script type="text/javascript">

	$("ul").delegate("li", "click", function(){
		var index = $(this).index();
 		var info = $(this).();
		alert(index + "----" + info);
	});

	</script>

	<script type="text/javascript">

	$("ul").on("click", "li", function(){
		var index = $(this).index();
 		var info = $(this).html();
		alert(index + "----" + info);
	});

	</script>

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<