Question

我在向此website that I'm playing with.的节点列表添加事件监听器时遇到问题

我希望带有 card-img-overlay 类的元素在鼠标悬停时更改其样式。

所以我尝试的第一件事是添加一个for循环，如下所示：

var banner = document.getElementsByClassName("card-img-overlay");

// add a for loop for event listeners on the nodelist
for ( i = 0; i < banner.length; i++) {
    banner[i].addEventListener("click",function(){
 banner[i].style.backgroundColor = "black"});
};

然后出现以下错误：

VM95：3未捕获的TypeError：无法读取未定义的属性'style' 在HTMLDivElement。（：3：12）

如何更好地将eventListener添加到节点列表？我还没有学习jQuery，所以我更喜欢使用VanillaJS。

非常感谢您！

Answer 1

当点击事件触发时，它不再知道i是什么。您可以使用this来引用单击的元素。

var banner = document.getElementsByClassName("card-img-overlay");

// add a for loop for event listeners on the nodelist
for ( i = 0; i < banner.length; i++) {
    banner[i].addEventListener("click",function() {
        // function will never know what 'i' is here
        this.style.backgroundColor = "black"
    });
};

提琴：https://jsfiddle.net/kcr7gLx1/2/

单击事件时更改元素节点列表的样式

1 个答案: