javascript - 循环内的 addEventListener 未定义 div 元素

Question

这是 HTML 和 JS 代码:

let sides = document.getElementsByClassName("sides");

for (var i=0;i<sides.length;i++){
    console.log(sides[i].innerHTML);  // top left 
    sides[i].addEventListener("click", function(){
        console.log(sides[i]);  //Undefined
    })
}

<div class="sides">top</div>
<div class="sides">left</div>

当我 console.log(sides[i])我得到了 div 元素，但是当我添加 addEventListener 时它显示 undefined .
请有人帮忙。

Answer 1

更改sides[i]至this以便它可以引用单击的元素本身。您的解决方案不起作用的原因是您的变量 i由于 i++，在最后一次迭代后递增到 2 .所以当事件监听器被触发时，sides[i]现在是 sides[2] .另一种方法是实例化 i使用 let如let i = 0 ，则可以访问sides[i]

<div class="sides">top</div>
<div class="sides">left</div>


<script>
    let sides = document.getElementsByClassName("sides");

    for (let i=0;i<sides.length;i++){
        console.log(sides[i].innerHTML);  // top left 
        sides[i].addEventListener("click", function(){
            console.log(this);
            console.log(sides[i])
        })
    }
</script>