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

我想为.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>

谢谢...

最佳答案

尝试每次迭代创建一个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不会引起任何问题。但是样式设置块将依赖属于单个作用域的i。至于循环，迭代i将增加，并且i的最终值将反射(reflect)在所有事件中。因此，您必须为每次迭代创建一个范围。

关于javascript - 通过JavaScript中的元素索引访问eventListener中的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36288115/