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中用于每次迭代）。

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

尝试纠正你的功能：

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()内的某个地方添加一个电话。

另请注意this内的“onlyOneRegion()”不正确（我猜你会看到当你的功能正常工作时会发生什么，它需要是{{} 1}}）。

Answer 4

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