javascript - setIndex的作用

問題描述

<ul id='tab_top'><li class='current'>公告</li><li>規則</li><li>論壇</li><li>公益</li><li>安全</li> </ul> <p id='tab_bottom'><p class='tab-content selected'> <ul><li> <a href='http://www.wxshucaidpc.com/wenda/4346.html#'>數據七夕:金牛愛送玫瑰</a></li><li> <a href='http://www.wxshucaidpc.com/wenda/4346.html#'>阿里打造'互聯網監管'</a></li><li> <a href='http://www.wxshucaidpc.com/wenda/4346.html#'>10萬家店60萬新品</a></li><li> <a href='http://www.wxshucaidpc.com/wenda/4346.html#'>全球最大網上時裝周</a></li> </ul></p> </p>

// 獲得屬性 function TabFn() { this.tabLi = $(’tab_top’).getElementsByTagName(’li’); this.tabC = $(’tab_bottom’).getElementsByClassName(’tab-content’); } // 定義原型方法 TabFn.prototype = {// 1.初始化事件initEvent: function () { this.setIndex(); this.bindEvent();},// 2.設置索引setIndex: function () { for (var i = 0; i < this.tabLi.length; i++) {var li = this.tabLi[i];li.index = i; }},// 3.綁定事件bindEvent: function () { for (var i = 0; i < this.tabLi.length; i++) {var own = this;this.tabLi[i].onmouseover = function () { own.handler(this);} }},// 4.事件處理函數handler: function (that) { for (var j = 0; j < this.tabLi.length; j++) {this.tabLi[j].className = ’’;// ！駝峰結構this.tabC[j].style.display = ’none’; } // that = li.current; that.className = ’current’;// that 為當前的tab上的li this.tabC[that.index].style.display = ’block’;} } window.onload = function () { var tab = new TabFn();tab.initEvent(); }

> 請問下這里setIndex的作用

問題解答

setIndex的作用是給top列表中的元素設置索引，設置索引的目的是因為bindEvent的時候不能傳遞索引i，因為循環執行完畢后，i始終等于this.tabLi.length，而在設置選項卡內容是否隱藏時

this.tabC[that.index].style.display = ’block’;

你需要知道，當前是操作的是第幾個li，這也就是setIndex的目的。