Question

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

console.log（infos [i]）正在运行，并且相关的div具有display none属性，因此我想问题出在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

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

let

for (let i = 0; i<infos.length;i++){将使它每次在循环中都获得新的绑定，因此每个事件侦听器都将与自己的i个人实例进行交互，从而与正确的元素进行交互。附言，请确保不使用var，否则您将回到相同的问题。

TypeError：infos [i]未定义

1 个答案: