前端攻城獅學習筆記四：點擊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基本功，可稱得上短小精悍。