js四种获取按钮下标的方法

四种获取下标的方法

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

先声明一个btns数组存储button

let btns = document.getElementsByTagName("button");

想要获取当前按钮对应的下标,获取点击按钮：

for(let i = 0;i < btns.length;i++){
    btns[i].onclick = function(){
        console.log(i);
    }
}

使用属性存储下标

for (var i = 0;i<btns.length; i++){
    btns[i].index = i;
    btns[i].onclick = function(){
        console.log(this.index)
    }
}

使用forEach便利

btns.forEach(function(e,i){
//e是元素，i是每个下标
    btns[i].onclick = function(){
    console.log(i);
}
})

使用闭包解决

for(var i = 0;i<btns.length;i++){
    (function(){
    btn[i].click = function(){
        console.log(i)
    }
    })();
}