使用双for循环给div的每个子元素setattribute，index属性为什么只能给最后一个li添加呢？


<style>
    div {
        width: 400px;
        height: 400px;
        background-color: red;
    }
</style>

<body>
    <div></div>
</body>
<script>
    var div = document.querySelector('div');

    for (let i = 0; i < 4; i++) {
        var li = document.createElement('li');
        div.appendChild(li);
        li.addEventListener('click', function() {
            for (let i = 0; i < 4; i++) {
                li.setAttribute('index', i);
            }
        });
    }
</script>

img

正确的写法我知道，这是我在做轮播图练习的时候无意中写出来的，不太理解为什么第二个for循环中li.setattribute('index',i)为什么只能给最后一个li添加index属性 而不是给每一个li全部都加上index呢？

其实还是闭包问题，你将图片这里的li改成this就好了，因为第一层循环之后li变量已经变成最后一个li了，所以无论你点击哪个，其实点击函数接受到的li都是第四个li的变量，所以相对于都在点击第四个，但是改为this之后，就不会了，this会为你记录上下文。有帮助麻烦点个采纳【本回答右上角】

img

我猜你点哪个li就给哪个加的index