将循环中的onmouse事件分配给div数组-Javascript

Question

我正在尝试通过循环将onmouseover-onmouseout事件分配给div数组。

我也通过使用函数参数createDivs(x)通过循环创建了div，x是div的数量和一堆this.property来分配样式。

一切正常，但通过带有divArray.Length对象的循环分配鼠标事件。

脚本如下：

制作div：

containers : {

    create : function(containerCount){
        var cArray = [this.c1Color,this.c2Color,this.c3Color];
        var aCounter = 0;
        divArray = [];
        for (var i = 1; i <= containerCount; i++){
            var c = document.createElement("div");
            c.id = ("container"+i);
            c.style.width = "100%";
            c.style.height = (this.height) + "px";
            c.style.backgroundColor = (cArray[aCounter]);
            aCounter++;
            document.body.appendChild(c);
            divArray.push(c);

            }

        }

},

分配事件：

events : {

    on : function () {

        var z = 1;

        for (var i = 0; i < divArray.length; i++){

            var cont = ("container" + z);

            document.getElementById(divArray[i].id).onmouseover = function(){
                gala.animate.openAnimation(cont);
            }

            document.getElementById(divArray[i].id).onmouseout = function(){
                gala.animate.shrinkAnimation(cont);
            }

            console.log(cont);
            z++;

        }

    }

控制台按预期显示通过div数进行的数组排序，并且cont变量++增加以分配ID。但是，最后，事件侦听器仅应用于数组的最后一个元素。

顺便说一句，cont变量只是传递动画方法的参数的占位符，因此它知道要设置动画的div，这意味着animat.openAnimation(cont) cont = div名称。

Answer 1

看起来您需要一个新的作用域，以使事件处理程序中的cont变量的值保持恒定。我替换了cont变量，因为它似乎没有必要]

events : {

    on : function () {

        for (var j = 0; j < divArray.length; j++){

            (function(i) {

                divArray[i].onmouseover = function(){
                    gala.animate.openAnimation("container" + (i+1));
                }

                divArray[i].onmouseout = function(){
                    gala.animate.shrinkAnimation("container" + (i+1));
                }

            })(j);

        }

    }