0

我正在尝试使用 Raphael 创建一个相当简单的界面，如果您单击给定路径，您将获得相应的 div 出现。由于我可能会使用不规则形状，因此我将在 Illustrator 中创建形状，然后使用 readysettraphael.com 转换为路径，但如果有更好的方法，我也愿意。

我基本上是想捕捉您在此处看到的功能，但使用 raphael 对象作为按钮。

http://jsfiddle.net/4xV7b/

这是我目前的小提琴——我不明白在 mouseclick 事件期间需要发生什么来显示/隐藏相应的 div。

el.click(function() {
   //mysterious voodoo magic goes here

});
4

2 回答 2

0

您可以使用纯 javascript 来显示一个 div：

document.getElementById("redthing").style.display = "block";

如果你想要动画，你可以尝试使用 jQuery，甚至可以使用 css 手动创建它们

于 2012-11-30T15:41:49.757 回答
0

如果您使用的是 Raphael 2，您可以使用该data方法将任意信息与您的元素一起存储——如本例所示。

本质上，当您创建每条路径时，您只需调用

el.data( 'div_id', 'greenthing' );

然后，当单击该元素时，您可以使用从元素中检索指示的 div

el.click( function()
    {
        var div_id = this.data( 'div_id' );
        // Display the div here.  Josemando's approach is perfectly cool and will work universally.
    } );

如果你想确保一次只显示一个 div，你可以这样做（原始但有效）：

el.click( function()
    {
        rsr.forEach( function( subEl )
            {
                var divId = subEl.data('div_id' );
                if ( divId && document.getElementById( divId ) )
                    document.getElementById( divId ).style.display = 'none';
            } );
    } );

当然，还有其他方法可以剥那只猫的皮。

您可能还会发现，如果将所有特定于形状的数据放入结构化对象中，然后在循环中渲染每个路径，您的路径构造代码会更易于管理。我在上面提供的小提琴演示了这种技术，一旦你拥有多个形状，它就会很快得到回报。

于 2012-11-30T18:59:22.820 回答