javascript - 使用 Raphael 和 JavaScript 悬停数组

Question

使用 Raphael，当您将鼠标悬停在形状附近的不可见区域时，我试图让该形状出现。以下代码不起作用 - 我哪里出错了？

每个形状都有两条与之关联的拉斐尔路径:一条用于可见形状，另一条用于不可见区域。

<script type="text/javascript" charset="utf-8">
 $("document").ready(function() {
        var RM  = Raphael("canvas", 1000, 500);

        var attr = {     // for the visible shapes
            fill: "#bbb",      "fill-opacity": 1,
            stroke: "#222",    "stroke-width": 0.3,
        };
        var attr2 = {    // for the invisible hovering areas
            fill: "green",     "fill-opacity": 0.0,
            stroke: "red",     "stroke-width": 0,
        };
        var things = {};

        /* Square */    things.square     = [ RM.path("m 154.21525,71.431259 74.32805,0 0,70.496711 -74.32805,0 0,-70.496711 z").attr(attr),
                                              RM.path("m 271.25132,77.933263 58.07304,0 0,56.409037 -58.07304,0 0,-56.409037 z").attr(attr2)   ];
        /* Triangle */  things.triangle   = [ RM.path("m 154.02932,222.44063 36.78089,-58.23641 34.48208,58.2364 -71.26297,1e-5").attr(attr),
                                              RM.path("m 271.25132,165.71032 58.07304,0 0,56.40903 -58.07304,0 0,-56.40903 z").attr(attr2)   ];
        for (var shape in things) {
            shape[0].color = Raphael.getColor();

shape[1].onmouseover = function () {
 shape[0].animate({fill:shape[0].color, stroke:"#ccc"}, 500);
 document.getElementById(shape)[0].style.display = "block";
 shape[0].toFront();   R.safari();
};
shape[1].onmouseout = function () {
 shape[0].animate({fill:"#bbb", stroke:"#222"}, 500);
 document.getElementById(shape)[0].style.display = "none";
 shape[0].toFront();   R.safari();
};
        } // end for every member of things
    }); // end the document ready function
</script>

Raphael网站上的例子使用了比较复杂的javascript: http://raphaeljs.com/australia.html

我没有使用这段代码，因为我不明白他们使用的函数语法:

(function (a, b) {
    ----
})(c, d);

但我仍然看不出我的版本有什么问题。

Answer 1

for (var shape in things) { ...

这不像 foreach，而是更像 Perls:

foreach my $shape (keys $things) { ...

所以你的代码应该是:

for (var shape in things) {
    things[shape][0].color = Raphael.getColor();
    ...

---

补充回答

函数语法比较简单，在现代js代码中很常见，大家应该熟悉一下。让我们逐步构建该函数。

我们知道:

function foo (x,y) {};

声明一个函数，但在 javascript 中函数可以是匿名的:

function (x,y) {};

是一个没有名字的函数。现在，在声明中，这是相当无用的，但如果我们在表达式中这样做，它会产生对该函数的引用。那么我们如何使它成为一个表达式呢？只需在其左侧放置一个 = 符号即可:

var foo = function (x,y) {}

是一个函数表达式，将函数赋值给变量 foo。

除了在 = 符号的右边，还有其他地方代码被认为是表达式。其中之一是当代码发生在大括号内时。它真的来自数学:

var x = a * (b + c);

= 符号右侧的所有内容都是表达式，但 (b+c) 是特殊的，因为它是首先计算的子表达式。 () 语法使 b+c 本身成为一个表达式。同样:

(function (x,y) {})

强制将最初看起来像函数声明的内容变成函数表达式。该规则来自前面的数学表达式。

如前所述，函数表达式的计算结果为函数引用。您可以使用函数引用做的事情之一是使用它来调用函数:

var foo = function (x,y) {};
foo();

这里，foo 之后的() 含义不同:它用于进行函数调用。由于我们可以使用函数引用进行函数调用，并且由于函数表达式的计算结果为函数引用，因此我们可以在不将其分配给任何变量的情况下调用该函数:

(function (x,y) {})();  // think of it as foo() where foo=(function(x,y){})