Question

The current state

从我的链接中，您可以在地图上选择不同的区域，一切似乎都有效，直到您重新选择之前选择的县。存储在每个路径中的数据值决定它是isSelected还是notSelected。我在更改仅使用this点击的元素数据时没有问题，但我找不到以我可以更改其元素数据的方式存储所选内容的方法。这意味着我首先必须点击上一个县将其元素数据设置为notSelected

首先我定义var currentcountyselected = "";。这允许我存储paths[arr[this.id]].name;。当我点击新路径时，我可以使用$('#'+currentcountyselected).attr({fill: attributes.fill});

进行最后一次路径填充更改

在Raphael的for循环中，我设置了obj.data('selected', 'notSelected');，因此所有路径元素都设置为notSeelected。

所以我需要的是存储最后一条路径的方法，以便我可以更改它的元素数据

这是从实例中清除的点击功能。

obj.click(function(){
if(this.data('selected') == 'notSelected')
    {this.animate({fill: '#698B22'  }, 300);                
    this.data('selected', 'isSelected');
    $('#'+currentcountyselected).attr({fill: attributes.fill}); 
    paths[arr[this.id]].value = "isSelected";
    currentcountyselected = paths[arr[this.id]].name;
    }
else
    {this.animate({fill: '#32CD32'}, 300);                  
    paths[arr[this.id]].value = "notSelected"; /* set path value*/
    this.data('selected', 'notSelected');                       
    }   
});/* end mark selections */

我已经在这个项目上工作了一段时间，客户现在希望界面以不同的方式工作。这真的很耗费我的时间。

编辑：
虽然我通过简单地取出if/else找到了解决方案，但我仍然想知道如何获取前一个路径（或任何路径）的元素数据。

Answer 1

这是我的解决方案，因为它可能对某人有所帮助。 我的问题中的链接存在点击满意用户的问题。

全局

var previouscountyselected = "Mayo"; /* default start, can be any county(path) */
var start = true;
var past = null;

更改了代码

obj.click(function(){
if(paths[arr[this.id]].value == 'notSelected')
    {
    this.animate({fill: '#698B22'}, 200);
    paths[previouscountyselected].value = "notSelected";
    paths[arr[this.id]].value = "isSelected";
    previouscountyselected = paths[arr[this.id]].name;

    if (!start && past != this)
        {
            past.animate({ fill: '#fff' }, 200);
        }
    past = this;
    start = false;                  
}
else if(paths[arr[this.id]].value == 'isSelected')
{
    this.animate({fill: '#32CD32'}, 200);
    paths[arr[this.id]].value = "notSelected"; /* set path value */ 
}
});

概述 if (!start && past != this)有点不寻常，需要或动画渐弱变得混乱和波涛汹涌。如果是第一次点击路径，则不会触发淡入淡出，如果您只是点击一条路径上的点击，它就不会淡化为白色。主 if / else 处理实际控制值。直到我得到一个jsfiddle，这个链接将演示所需的行为。

注意！此链接中的下拉菜单无效。

Click happy friendly

SVG - raphael：存储选定的最后路径，以便更改元素数据

1 个答案: