经典的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.事件委托
<script type="text/javascript">
var myul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
myul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});
</script>
4.引入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).html();
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>