原生js——点击获取当前索引的方法

html代码部分

<button>A-1</button>
<button>B-2</button>
<button>C-3</button>
<button>D-4</button>
<button>E-5</button>

js代码部分
方法一:
//减少代码量

var btns = document.querySelectorAll('button');
for(var i = 0;i < btns.length;i ++){
    (function(index){
        btns[index].onclick = function(e){
            console.log(index);
        }
    })(i);
}

方法二:
//便于理解

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

function searchIndex(navitem){
    for(var i=0;i<btns.length;i++){
        var index = -1;
        if(btns[i] == navitem){
            index = i;
            break;
        }
    }
    return index;
}

}

猜你喜欢

转载自blog.csdn.net/zhuxufeifei/article/details/81914466