javascript - What does setIndex do?

Question

<ul class="tab-top" id="tab_top">
        <li class="current">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>公益</li>
        <li>安全</li>
    </ul>
   <p class="tab-bottom" id="tab_bottom">
        <p 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>
        </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的作用

Answer 1

The function of setIndex is to set the index for the elements in the top list. The purpose of setting the index is because the index i cannot be passed during bindEvent, because after the loop is executed, i is always equal to this.tabLi.length, and when setting the tab content, whether When hiding

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

You need to know which li you are currently operating on, which is the purpose of setIndex.