題目要求
這是淘寶前端開發面試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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
