JS—创建10个a标签，点击弹出相应1-10的序号

创建10个a标签，点击弹出相应1-10的序号

错误做法：弹出均为11，当触发事件时，for循环已经结束，i为11

let i, a;
for (i = 1; i < 11; i++) {
    a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function(e) {
        // 阻止默认行为
        e.preventDefault();
        alert(i)
    });
    document.body.appendChild(a);
}

方法一：改变i的作用域为块级作用域

let a;
//改变i的作用域为块级作用域
for (let i = 1; i < 11; i++) {
    a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function(e) {
        // 阻止默认行为
        e.preventDefault();
        alert(i)
    });
    document.body.appendChild(a);
}

方法二：利用闭包，立即执行函数

var a;
for (var i = 1; i < 11; i++) {
    (function(i) {
        a = document.createElement('a');
        a.innerHTML = i + '<br>';
        a.addEventListener('click', function(e) {
            // 阻止默认行为
            e.preventDefault();
            alert(i)
        });
        document.body.appendChild(a);
    })(i);
}

如若是点击ul列表下的li弹出对应序号，还可以使用事件委托方法。