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='https://www.haobala.com/wenda/4346.html#'>数据七夕:金牛爱送玫瑰</a></li><li> <a href='https://www.haobala.com/wenda/4346.html#'>阿里打造'互联网监管'</a></li><li> <a href='https://www.haobala.com/wenda/4346.html#'>10万家店60万新品</a></li><li> <a href='https://www.haobala.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的目的。