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

Question

我在将事件侦听器添加到此 website that I'm playing with.

的节点列表时遇到问题

我希望带有 class 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 Uncaught TypeError: Cannot read property 'style' of undefined at 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"
    });
};

Fiddle: https://jsfiddle.net/kcr7gLx1/2/

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

Change the style of an element nodelist on click event

javascript

events

dom

nodelist