四种获取下标的方法

四种获取下标的方法

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

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

var btns = document.querySelectorAll("button");

• 使用let定义变量，使{}也能形成作用域ES6中的用法

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)
    }
    })();
}