Javascript TypeError:infos[i]未定义

我已经用Materialize框架设置了一个旋转木马，现在我想用mouseenter事件显示一些文本，但它似乎不起作用。我的文本的显示仍然是无的，并且我有一个错误TypeError:infos[i]是未定义的

console.loginfos[i]正在工作，相关div具有display none属性，因此我猜问题来自elem.addEventListener'mouseenter'函数行{ infos[i].style.display=block }

M.AutoInit();

document.addEventListener('DOMContentLoaded', function () {

    let interval = null
    const timeInterval = 5000
    const elem =  document.querySelector('.carousel')
    const carousel = M.Carousel.getInstance(elem, { 
        indicators: true
    })
    const iterate = () => carousel.next()
    const init = () => setInterval(iterate, timeInterval)
    interval = init()
    elem.addEventListener('mouseenter', () => clearInterval(interval))    
    elem.addEventListener('mouseleave', () => {
        interval = init()
    })

    var infos = document.querySelectorAll('.infos');
        for (i = 0; i<infos.length;i++){
            infos[i].style.display="none"
            //console.log(infos[i])
            elem.addEventListener('mouseenter', function(){
            infos[i].style.display="block"
            })
        }

}) 

您有一个全局i变量，每个事件侦听器都在使用该变量。在调用事件侦听器时，i早已增加到infos.length，而infos[infos.length]尚未定义。而是用let创建一个局部变量

---

let将使它每次通过循环都获得一个新的绑定，因此每个事件侦听器都将与自己的i实例交互，从而与正确的元素交互。另外，请确保不要使用var，否则您将回到同一个问题。

变量范围问题不要忘记定义变量，因为i=0；您还需要所谓的块级范围，因此请尝试->for let i=0；可能重复和臭名昭著的for循环…不确定您在这里想要实现什么。在我看来，您将多个mouseenter事件添加到.carousel中，每个.infos一个，最终结果是在.carousel悬停时显示所有.infos。对吗？

for (let i = 0; i<infos.length;i++){