Question

我正在尝试与Raphael创建一个相当简单的界面，如果你点击一个给定的路径，你将得到一个相应的div出现。由于我可能会使用不规则形状，我将在Illustrator中创建形状，然后使用readysetraphael.com转换为路径，但如果有更好的方法，我也会对此持开放态度。

我基本上希望捕获您看到here的功能，但将raphael对象作为按钮。

http://jsfiddle.net/4xV7b/

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

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

});

Answer 1

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

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

如果您想要动画，可以尝试使用jQuery，甚至可以使用css

手动创建它们

Answer 2

如果您使用的是Raphael 2，则可以使用data方法在元素中存储任意信息 - 例如this example。

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

即可

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';
            } );
    } );

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

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

单击路径以显示/隐藏div

2 个答案: