前端攻城狮学习笔记四:点击ul下的li时alert其index值(闭包的应用)

题目要求

  这是淘宝前端开发面试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基本功,可称得上短小精悍。


AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年

AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年

本文来自一日成建站教程网https://www.yiricheng.cn/),为广大编程爱好者提供零基础快速搭建博客网站的方法,分享计算机网络、HTML、CSS、JavaScript、PHP、响应式设计以及Python自动化办公的博客文章,另有各类小工具、电子书、免费教程。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

相关阅读  JavaScript 10分钟入门