0

I've made 4 rectangles in raphael.js using the for loop. When I apply events such as onmouseover or onmouseout it applies only to the last rectangle created. I know something is wrong in my code. Please provide a solution and is there a way to simplify the code?

JS Fiddle 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");
            };
        }
    }    
}​
4

1 に答える 1

3

これは、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);
    }
}
}

な

于 2012-10-01T14:03:27.543 に答える