無法正確解決：將事件偵聽器從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);