setIndex的作用

Question

<ul class="tab-top" id="tab_top">
        <li class="current">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>公益</li>
        <li>安全</li>
    </ul>
   <div class="tab-bottom" id="tab_bottom">
        <div class="tab-content selected">
            <ul>
                <li>
                    <a href="#">数据七夕:金牛爱送玫瑰</a>
                </li>
                <li>
                    <a href="#">阿里打造"互联网监管"</a>
                </li>
                <li>
                    <a href="#">10万家店60万新品</a>
                </li>
                <li>
                    <a href="#">全球最大网上时装周</a>
                </li>
            </ul>
        </div>
    </div>

//  获得属性
     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的作用

Answer 1

setIndex的作用是给top列表中的元素设置索引，设置索引的目的是因为bindEvent的时候不能传递索引i，因为循环执行完毕后，i始终等于this.tabLi.length，而在设置选项卡内容是否隐藏时

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

你需要知道，当前是操作的是第几个li，这也就是setIndex的目的。