题目要求
这是淘宝前端开发面试JavaScript部分一道题。
下面这个ul，如何点击每一列的时候alert其index?：
<
ul
id
=”test”
>
<
li
>
这是第一条
</
li
>
<
li
>
这是第二条
</
li
>
<
li
>
这是第三条
</
li
>
</
ul
>
题目分析
两种方案，一是给每个li加一个自定义属性，然后在点击事件中alert出就行，二是利用闭包。这两种方法各有利弊，前者简单，但增加了自定义属性，改变了页面HTML代码，后者代码简洁但增加了内存消耗。代码如下：
function
$(id) {
return
document.getElementById(id);
}
//
方法一
var
lis = $("test"
).children;
for
(
var
i = 0, l = lis.length; i < l; i++
) {
lis[i].setAttribute(
"index"
, i);
lis[i].onclick
=
function
() {
alert(
this
.getAttribute("index"
));
}
}
//
方法二
var
lis_lis = $("test").getElementsByTagName("li"
);
for
(
var
i = 0, l = lis_lis.length; i < l; i++
) {
lis_lis[i].onclick
= (
function
(x) {
return
function
() {
alert(x);
}
})(i);
}
效果验证
- 这是第一条
- 这是第二条
- 这是第三条
小结
题目内容虽少，但考察了闭包等JS基本功，可称得上短小精悍。
