Question

我试图在一个元素被徘徊时修改它，在某些时候，我需要获得所有带有类名“image”的元素，我的问题是，虽然allElements在main函数内部有一个值（第一个警告）显示值），allElements在从匿名函数调用时不再具有值（未定义）。

这里有什么问题？

function register() {

    var i = 0
    var allElements = document.getElementsByClassName("image")
    alert(allElements) // Has a value
    while (i < allElements.length) {
        allElements[i].addEventListener("mouseover", function() {
            var description = null
            var j = 0
            alert(allElements[i]) // Undefined
            while (j < allElements[i].children.length) {
                var child = allElements[i].children[j]
                description = child
                if (child.id == "description") {
                    break
                }
                j++;
            }

            description.style = "display: block"

        });
        i++
    }

}

谢谢

Answer 1

当事件触发时，i等于elements.length，因此elements[i]未定义 - 没有elements[elements.length]这样的元素。

您将在此处阅读：JavaScript closure inside loops – simple practical example更详细地解释了循环索引变量问题。

对于您的特定问题，人们建议通过注释使用this，因为在事件处理程序中this对象引用已被鼠标悬停的元素，这允许您避免循环指数问题。

Answer 2

尝试在函数内传递事件并通过事件访问元素。

allElements[i].addEventListener("mouseover", function(e) {
  // code
  alert(e.target);
  // code
});

为什么这个未定义？

2 个答案: