无法正确使用：从getElementsByClassName向元素添加事件侦听器

Question

请告诉我下面的代码有什么问题：

            for(var i = 0; i < image.length; i++) {
                image[i].appendChild(overlay);

                image[i].addEventListener("mouseover", function() {
                    this.firstChild.style.backgroundColor = "rgba(0, 0, 0, 0)";
                    this.style.backgroundSize = "340px 240px";
                    this.style.WebkitTransition = "all 0.5s";
                    this.style.transition = "all 0.5s";
                }, false);  

                image[i].addEventListener("mouseout",function() {
                    this.firstChild.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
                    this.style.backgroundSize = "300px 200px";
                    this.style.WebkitTransition = "all 0.5s";
                    this.style.transition = "all 0.5s";
                }, false);
            }

这样做是循环使用getElementsByClassName（）函数得到的元素的图像数组。

var image = document.getElementsByClassName(ClassName);

我从浏览器的控制台得到的错误是：

如果我错过了你需要知道的任何事情，请告诉我。或者，如果您对如何更好地编写此代码有任何建议，请将其启用。

注意：没有jQuery。

Answer 1

您只有一个overlay元素，您只是更改了它的父元素。在循环之后，它将附加到image集合中的最后一个元素。

要解决此问题，您可以在每次将其附加到新父级时创建overlay的副本，如下所示：

image[i].appendChild(overlay.cloneNode(true));

如果克隆元素有id，您就可以为每个克隆创建一个新的id，如下所示：

var clone = overlay.cloneNode(true);
clone.id = clone.id + i; // Adds i to the end of the id, use date or some else unique string instead, if you're running the loop multiple times
image[i].appendChild(clone);