点击哪个元素显示哪个的序号,三种解法~

<p>i am gluet1</p>
<p>i am gluet2</p>
<p>i am gluet3</p>
<p>i am gluet4</p>
<p>i am gluet5</p>
var items = document.querySelectorAll("p"),
    len = items.length;

for (var i = 0; i < len; i++) {  //解法一
    (function(i) {
        items[i].onclick = function() {
            console.log(i + 1)
        }
    })(i)
};

for (let i = 0; i < len; i++) {  //解法二es6声明变量为block级
    items[i].onclick = function() { 
        console.log(i + 1)
    }
};

for (var i = 0; i < len; i++) {  //解法三算是个hack吧
    items[i].index = i; 
    items[i].onclick = function() {
        console.log(this.index + 1)
    }
};

猜你喜欢

转载自blog.csdn.net/dokill/article/details/78320295