javascript - 类型错误 : infos[i] is undefined

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 4 年前。

我已经使用 Materialise 框架设置了一个轮播，现在我想使用 mouseenter 事件显示一些文本，但它似乎不起作用。我的文本仍然没有显示，并且出现错误“TypeError:infos[i]未定义”。

console.log(infos[i]) 正在工作，相关的 div 没有显示属性，所以我猜问题来自 elem.addEventListener('mouseenter', function(){ 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"
            })
        }

}) 

Answer 1

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

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

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