原生JS遍历时获取下标的三种方式

设置元素自定义属性：

<nav>
                <div class="nav-item" index = "0">AAL</div>
                <div class="nav-item" index = "1">AAL</div>
                <div class="nav-item" index = "2">AAL</div>
                <div class="nav-item" index = "3">HPBA</div>
            </nav>

navItems.forEach(function (item){
          
   
        item.addEventListener(touchstart,function (){
          
   
            var index = this.getAttribute(index);
        })
    })

设置元素dataset属性：

<nav>
                <div class="nav-item" data-index = "0">AAL</div>
                <div class="nav-item" data-index = "1">AAL</div>
                <div class="nav-item" data-index = "2">AAL</div>
                <div class="nav-item" data-index = "3">HPBA</div>
            </nav>

navItems.forEach(function (item){
          
   
        item.addEventListener(touchstart,function (){
          
   
            var index = this.dataset.index;
        })
    })

forEach遍历直接获取下标：

HTML中不用加入任何属性

navItems.forEach(function (item,key){
          
   
    // 将下标存入元素当中
    	item.key = key;
        item.addEventListener(touchstart,function (){
          
   
            var index = this.key;
        })
    })