RaphaelJS 仅显示一种活动状态

Question

更新：

我已经修复了下面的引用，我的问题现在更具体了。

背景：我有一组组成地图的路径。目前，当单击每个区域时，我都有一个可视的开/关状态，但我只希望一个区域在任何给定时间“活动”。我正在调用一个函数，该函数旨在遍历所有区域，并将任何非活动区域的填充颜色更改回灰色。目前，当运行以下行时，它似乎创建了一组新路径：var obj = rsr.path(pathObj.path);。下面是之前和之后的画面。

我知道这不是渲染问题，因为新路径已注入 DOM。

这是我在这个项目上的最后一个障碍，我觉得我很接近了！

您可以在这里查看页面：http://ochrerecruitment.com.s145292.gridserver.com/job-search/

这是我在点击事件结束时运行的函数（感谢 Eliran Malka，谢谢）：

function onlyOneRegion() {
    for (var state in paths) {
            var pathObj = paths[state];
            var obj = rsr.path(pathObj.path);
            if (pathObj.active) {
                // do something
            } else {
                pathObj.active = false;
                obj.toFront();
                obj.animate({
                    fill: attributes.fill,
                    scale: 1,
                    'stroke' : '#fff',
                    'stroke-width' : 1,
                    transform: 's1'
                }, 150);
            }
    };
}

再次感谢！

原问题：

我目前有一张地图，点击时会设置<select> 值。地图上的每个区域还具有悬停状态和开/关状态。

<select> 功能仅允许一个区域在任何给定时间处于活动状态。

我的问题是我无法弄清楚如何仅以可视方式显示一个活动项目。所以在点击时，一个区域会打开，但我也希望它关闭所有其他区域。

我的完整功能可以在这里查看：http://pastie.org/3675997

每个区域的结构如下：

var paths = {
    southisland: {
        name: 'southisland',
        path: 'coords',
        active: 'false'
    }

在我的点击事件中，如果其他情况，我有以下内容：

if (this.active) {
    this.active = false;
    this.animate({
        fill: attributes.fill,
        scale: '1',
        'stroke-width' : '1',
        transform: 's1'
    }, 150);                    
} else {
    this.active = true;
    this.animate({
        fill: '#e36f1e',
        scale: '1',
        'stroke-width' : '1',
        transform: 's1'
    }, 150);
}

在那之后我试图调用以下函数：

function onlyOneRegion() {
    for (var state in paths) {
        var obj = rsr.path(paths[state].path);
        if (state[active]) {
        } else {
            state[active] = false;

            obj.animate({
                fill: attributes.fill,
                scale: '1',
                'stroke-width' : '1',
                transform: 's1'
            }, 150);
        }
    };
}

此函数不会抛出任何错误，但不会失效。

非常感谢任何帮助！

Answer 1

您正在尝试调用paths 索引上的属性。请注意，state 是 paths 列表迭代器的索引，而不是对象（例如在 Java 中的 for-each 迭代）。

另一件事，当传递数值时，将它们作为数值（而不是字符串）传递。

尝试像这样更正您的功能：

function onlyOneRegion() {
    for (var state in paths) {
        var pathObj = paths[state];
        var obj = rsr.path(pathObj.path);

        if (pathObj.active]) {
            // do something
        } else {
            pathObj.active = false;

            obj.animate({
                fill: attributes.fill,
                scale: 1,
                'stroke-width' : 1,
                transform: 's1'
            }, 150);
        }
    };
}

Answer 2

请将此state[active] 替换为state['active']

也将 state[active] 替换为 paths[state]['active']，因为 state 是字符串 - 状态的名称

Answer 3

查看您的完整粘贴，您实际上并没有在任何地方调用onlyOneRegion()。您需要在 click() 中的某处添加对它的调用。

还要注意onlyOneRegion() 中的'this' 是不正确的（我想当你让函数工作时你会看到那里发生了什么，它需要是rsr.path(paths[state].path)）。

Answer 4

我最终通过将我的地图创建重写为一个函数来解决更新的问题。每次单击某个区域时，它都会记住该区域，删除并重新创建地图，将区域与相关状态 ID 匹配并使其处于活动状态。不是最优雅的解决方案，但仍然是一个解决方案。