所有点击的项目的活动状态答案

【问题标题】：Active states for all items clicked所有点击的项目的活动状态
【发布时间】：2015-11-22 04:35:47
【问题描述】：

我正在使用 newsignature (https://newsignature.github.io/us-map/) 的 US-Map 插件。我已经建立了一个图表来比较每个州点击的不同州法律。

现在我可以比较 3 种不同的状态，用户可以关闭一个状态并单击不同的状态进行比较。

当您单击一个状态时，您将获得一个活动状态。一旦您单击另一个状态，活动状态就会消失并进入另一个状态。我无法弄清楚如何为单击的每个状态绑定一个活动状态。

$('#' + data.name).css('fill', '#0075b9');

该行使状态在单击时处于活动状态。我假设这需要应用于所有单击的状态，但将其添加到单击状态没有任何作用。

这是设置当前功能的小提琴：https://jsfiddle.net/yurtqy87/1/

有什么想法吗？

注意：为了节省时间，我只输入了纽约、加利福尼亚、乔治亚、阿拉斯加、阿拉巴马和佛罗里达的数据。单击任何其他状态不会在下面的列中产生任何结果。

【问题讨论】：

我不确定你想要什么效果，但是当你点击小提琴中的“加利福尼亚”时，你上面的代码行正在尝试用'ca' 的 ID。但是 DOM 中没有任何 id 为“ca”的内容。如果您调试 javascript，您可以在控制台中输入 $('#ca') 并得到 'null'。
对不起，我正在处理的 js 文件添加了一行代码，为每个状态提供了一个与该行相关的标识符。我编辑了小提琴，现在您将在单击时看到，每次单击都会为该特定状态创建一个 div。您还将看到，现在单击的每个状态都保持活动状态，直到单击新状态。这个想法是让每个被点击的状态都显示为活动状态。 jsfiddle.net/yurtqy87/10

【解决方案1】：

我查看了库 API 和方法，您必须对其进行改进。我会使用一个数组来存储选定的声明。

var selectedStates = ['XX', 'YY', 'ZZ'];

创建后，您可以为它们着色

stateSpecificStyles: {
        'XX': {fill: 'red'},
        'YY': {fill: 'red'},
        'ZZ': {fill: 'red'}
    }

当一个状态被点击时，如果它在选择中你应该删除它，如果不是你应该在它那里

删除在“点击”处理程序中：

var toRemove = data.name;

selectedStates = jQuery.grep(selectedStates, function(value) {
  return value != toRemove;
});

移除或添加状态后，只需刷新地图和您的 UI。

【讨论】：