在Raphael/JavaScript中选择节点

以下代码基本上是有效的（多亏了几天前的一个好答案！），除了最后一点之外，其他所有代码都是有效的：

things.square[1].node.setAttribute("id","clicker");
$("#clicker").click(function(){
    $("#canvas_things1").fadeOut();
    $("#canvas_things2").fadeIn();
});

我认为问题在于这一行：

things.square[1].node.setAttribute("id","clicker");

我本以为正方形[1]节点可以工作，但似乎不行。有人能发现出什么问题吗

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

        things.square[1].node.setAttribute("id","clicker");
        $("#clicker").click(function(){
            $("#canvas_things1").fadeOut();
            $("#canvas_things2").fadeIn();
        });

    }); // end the document ready function
</script>

$（“文档”）.ready（函数（）{
var RM=Raphael（“画布”，1000500）；
可见形状的var attr={//
填充：“bbb”，“填充不透明度”：1，
笔划：“222”，“笔划宽度”：0.3，
};
var attr2={//用于不可见的悬停区域
填充：“绿色”，“填充不透明度”：0.0，
笔划：“红色”，“笔划宽度”：0，
};
var事物={}；
/*Square*/things.Square=[RM.path（“m 154.21525,71.431259 74.32805,0,70.496711-74.32805,0，-70.496711 z”）.attr（attr），
RM.path（“m 271.25132,77.933263 58.07304,0,56.409037-58.07304,0，-56.409037 z”）.attr（attr2）]；
/*三角形*/things.Triangle=[RM.path（“m 154.02932222.44063 36.78089，-58.23641 34.48208,58.2364-71.26297,1e-5”）.attr（attr），
RM.path（“m 271.25132165.71032 58.07304,0,56.40903-58.07304,0，-56.40903 z”）.attr（attr2）]；
for（事物中的变量形状）{
形状[0]。颜色=Raphael.getColor（）；
（函数（形状，sh）{
形状[1][0]。onmouseover=函数（）{
形状[0]。动画（{fill:shape[0]。颜色，笔划：“#ccc”}，500）；
document.getElementById（sh）[0].style.display=“block”；
形状[0]。toFront（）；R.safari（）；
};
形状[1][0]。onmouseout=函数（）{
形状[0]。动画（{fill:#bbb”，stroke:#222”}，500）；
document.getElementById（sh）[0].style.display=“无”；
形状[0]。toFront（）；R.safari（）；
};
})（事物[sh]，sh）；
}//事物的每一个成员的结束
things.square[1].node.setAttribute（“id”，“clicker”）；
$（“#clicker”）。单击（函数（）{
$（“#canvas_things1”）.fadeOut（）；
$（“#canvas_things2”）.fadeIn（）；
});
}); // 结束文档准备功能

我认为这是因为当您有多个路径时，

things.square

不会映射到SVG中的单个元素。有两种方法应该有效：

循环遍历

things.square

中的每个路径元素，并对每个元素应用单击功能（此时将无法使用

id

属性）

使用将所有路径放在SVG中的

元素中，然后将函数应用于该元素

---

我认为这是因为当您有多条路径时，

things.square

不会映射到SVG中的单个元素。有两种方法应该有效：

循环遍历

things.square

中的每个路径元素，并对每个元素应用单击功能（此时将无法使用

id

属性）

使用将所有路径放在SVG中的

元素中，然后将函数应用于该元素

---

id

属性设置正确

请注意，我必须删除您的

for

循环。这是因为自动执行的匿名函数由于使用未定义的变量调用而导致运行时错误

sh

从未定义，但此处使用：

        })(things[sh], sh);                               // sh is never defined!
    } // end for every member of things

我本来会为循环替换

，但我不明白你想做什么

无论如何，我建议使用Raphael自定义事件处理程序
.hover（）


注意你不必要的昏迷（你有4个）：

笔划：“#222”，“笔划宽度”：0.3，//正确设置了
id
属性


请注意，我必须删除您的
for
循环。这是因为自动执行的匿名函数由于使用未定义的变量调用而导致运行时错误

sh
从未定义，但此处使用：

        })(things[sh], sh);                               // sh is never defined!
    } // end for every member of things

我本来会为
循环替换
，但我不明白你想做什么

无论如何，我建议使用Raphael自定义事件处理程序
.hover（）


注意你不必要的昏迷（你有4个）：

stroke:#222”，“stroke width”：0.3，//你怎么知道它不起作用？你有错误吗？如果是，它说什么？还是默默地失败了？如果是这样，你期望它做什么，而它没有做什么？它只是默默地失败了。我希望它会导致当前画布（canvas_things1）淡出，而另一个画布淡入。事实上，当“square”不是一个路径数组，而是一个路径时，它就会工作：things.square=RM.path（“…”）；和things.square.node.setAttribute（“id”，“clicker”）；。您如何知道它不起作用的可能副本？你有错误吗？如果是，它说什么？还是默默地失败了？如果是这样，你期望它做什么，而它没有做什么？它只是默默地失败了。我希望它会导致当前画布（canvas_things1）淡出，而另一个画布淡入。事实上，当“square”不是一个路径数组，而是一个路径时，它就会工作：things.square=RM.path（“…”）；和things.square.node.setAttribute（“id”，“clicker”）；。
things.square[1]的可能重复项。节点
是单个DOM元素。这部分代码实际上是有效的。
for
循环无效。
things.square[1]。节点
是单个DOM元素。这部分代码实际上是有效的。
的
循环不起作用。