javascript - 通过javascript中的元素索引访问eventListener中的元素

Question

我想为 .author_show 类添加 EventListener 以更改 .author样式...这是我的代码

<div class="post>
    <div class="post-cont>
        // Some text
        <div class="author_show"></div>
        <div class="author_show"></div>
        // Some text
    </div>
</div>
<div class="authors">
    <div class="author"></div>
    <div class="author"></div>
</div>
<script type="text/javascript">
var author_show = document.getElementsByClassName("author_show");
var authors = document.getElementsByClassName("author");
for(var i=0;i<authors.length;i++)
{
    author_show[i].addEventListener("mouseover",function(){
        authors[i].style.display = "block"; // Problem
    })
}
</script>

谢谢...

Answer 1

尝试为每次迭代创建一个scope，

for(var i=0; i<authors.length; i++) {
   (function(i) {
      author_show[i].addEventListener("mouseover",function(){
        authors[i].style.display = "block"; // Problem
      }); 
    })(i);
}

在您的代码中，addEventListener 不会导致任何问题。但是样式设置 block 将依赖于属于单个范围的i。对于循环迭代，i 将递增并且 i 的最终值将反射(reflect)在所有事件中。因此，您必须为每次迭代创建一个范围。