使用 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){})