Question

我使用 for循环在raphael.js中制作了4个矩形。当我应用诸如onmouseover或onmouseout之类的事件时，它仅适用于最后创建的矩形。我知道我的代码有问题。请提供解决方案，有没有办法简化代码？

JS小提琴Link

window.onload = function(){
    var paper = Raphael(0,0,640,540);

    for (i=0;i<2;i++){
        for (j=0;j<2;j++){
            var boxes = paper.rect(0+(j*320),0+(i*270),320,270).attr({fill:'#303030',stroke:'white'});
            boxes.node.onmouseover = function () {
                boxes.attr("fill", "blue");
            };
            boxes.node.onmouseout = function () {
                boxes.attr("fill", "#303030");
            };
        }
    }    
}

Answer 1

这是javascript中一个非常常见的错误。您重用boxes变量，因此当执行任何处理程序时，它指向它的最后一个值。

克服这个问题的常用方法是在函数调用中将代码包装在循环中：

window.onload = function() {
var paper = Raphael(0, 0, 640, 540);

for (i = 0; i < 2; i++) {
    for (j = 0; j < 2; j++) {
        (function(i, j) {
            var boxes = paper.rect(0 + (j * 320), 0 + (i * 270), 320, 270).attr({
                fill: '#303030',
                stroke: 'white'
            });
            boxes.node.onmouseover = function() {
                boxes.attr("fill", "blue");
            };
            boxes.node.onmouseout = function() {
                boxes.attr("fill", "#303030");
            };
        })(i, j);
    }
}
}

Raphael.js onmouseover onmouseout事件

1 个答案: