題目要求
這是淘寶前端開發面試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基本功，可稱得上短小精悍。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
