2

我使用 for 循环创建了 4 个矩形。如果您将鼠标悬停在这些矩形中的任何一个上，则会在旁边显示一个矩形。但问题是新显示的矩形不会在鼠标移出时隐藏。我的代码有什么问题？

JS小提琴

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

function aa(h1,h2){
    var showbox = paper.rect(h1+300,h2,100,100);
}
function ab(){
    showbox.hide();
}

for (i = 0; i < 2; i++) {
    for (j = 0; j < 2; j++) {
        (function(i, j) {
            var boxes = paper.rect(0 + (j * 100), 0 + (i * 100), 100, 100).attr({
                fill: '#303030',
                stroke: 'white'
            });
            boxes.node.onmouseover = function() {
                var h1 = boxes.getBBox().x;
                var h2 = boxes.getBBox().y;
                aa(h1,h2);
            };

            boxes.node.onmouseout = function() {
                ab();
            };
        })(i, j);
    }
}
4

1 回答 1

5

您遇到了 javascript 范围问题（以及另外两个较小的问题，见下文）。

该变量showbox在 function 中定义aa。所以你的 onmouseout 功能看不到它。启动 Firebug 或您的浏览器的等价物，您会看到一堆showbox is not defined错误。

提示：在使用 Raphael 时，我通常会创建一个对象或数组，其中包含我创建的所有对象，键入以便于访问，并在所有与 Raphael 相关的函数之上限定范围，以便所有人都可以访问它（参见下面的 jsfiddle 示例）。

如何访问您的 Raphael 对象是您需要尽早决定的应用程序设计，否则您将需要进一步进行大量重构（去过那里，很痛苦！）。

这是适用于您的代码的改编版本：

jsfiddle

编辑：我添加了解释每个更改的注释。

它还解决了另外两个问题：

  • （在 jsfiddle 代码中）没有，例如attr在display: none;Raphael 中，尝试.attr({opacity:0})或.hide()...
  • ...但是...不要！您的 mouseover 事件创建矩形，您的 mouseout 事件...隐藏它们...？您将拥有越来越多的不可见矩形堆栈，最终可能会使某人的浏览器崩溃。要么显示，然后隐藏，要么创建，然后删除 - 不要创建然后隐藏！

mouseover / mouseout 事件本身实际上很好！:-)

于 2012-12-14T19:26:30.107 回答