Question

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

我使用函数参数createDivs（x）通过循环ass创建了div，x是div的数量，并且是一堆this.property来分配样式。

一切都按预期工作，但通过divArray.Lenght对象循环指定鼠标事件。

脚本如下：

制作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 name。

提前致谢。

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);

        }

    }

使用循环分配onmouse事件到div数组 - Javascript

1 个答案: