单击功能仅对某些数据名称执行答案

【问题标题】：click function to only execute on certain data names单击功能仅对某些数据名称执行
【发布时间】：2015-06-05 10:02:48
【问题描述】：

我有这个click:function 用于交互式jQuery US map。

下面定义了“活动颜色状态”——点击后颜色状态会发生变化。我想更改为仅在我选择的几个状态下工作/执行。每个州都有一个 data.name 及其缩写。 例如。 'OH' 'CA' 'TX" 'NY' 等。点击其他状态时，活动颜色会消失（如下所示）我只需要能够仅使用我选择的状态而不是全部 50 个状态。

click: function(c, l) {
    $("#map > svg > path").each(function() {
            $(this).css("fill", "")
        }),
        $("#" + l.name).css("fill", "#ffc600"),

【问题讨论】：

标签： javascript jquery svg raphael

【解决方案1】：

定义一个包含允许状态var clickable = ['OH','CA','TX','NY'];的数组，然后使用indexOf查看是否处于点击状态..

试试

click: function(c,l){
  var node = $(l.shape.node),
      siblings = node.siblings('path');

  siblings.css('fill','');
  if (clickable.indexOf(l.name) > -1){
    // select it
    node.css('fill','green');
  }
}

http://codepen.io/gpetrioli/pen/dPLGVg的演示

不过，您可以使用 CSS 进行样式设置
（示例要求浏览器支持 classList 属性）

click: function(c,l){
  var active = $(l.shape.node)
                 .siblings('.selected')
                 .get(0);

  // if there is an selected path
  if (active) {
    // de-select it
    active.classList.remove('selected');
  }
  // if clicked node is in list of clickables
  if (clickable.indexOf(l.name) > -1){
    // select it
    l.shape.node.classList.add('selected')
  }
}

http://codepen.io/gpetrioli/pen/dPLGRg的演示

【讨论】：

【解决方案2】：

如何使用 USMap 的配置选项并使用它的stateSpecificStyles

$('#map').usmap({
  stateSpecificStyles: {
    'MD': {fill: '#ffc600'},
    'VA': {fill: '#ffc600'}
  } 
});

然后您可以收集所有点击状态并相应地更新stateSpecificStyles：

var clickedStates = [];  // array with states that have been clicked

click: function(c, l) {
    // if state was clicked before no need for update - so check
    if (clickedStates.indexOf(l.name) < 0) {
        // remember clicked state
        clickedStats.push(l.name);
        // build new state styles
        var styles = {};
        for (var i=clickedStats.length-1; i >= 0; i--) {
            styles[clickedStats[i]] = {fill: '#ffc600'};
        }
        // pass new style object to map
        $('#map').usmap({
          stateSpecificStyles: styles 
        });
    }
}

这应该会改变每张点击地图的颜色，如果您想实现不同的逻辑（点击 CA 颜色 CA、NY 和 TX），那么您只需添加到 clickedStates 数组。

希望有所帮助

【讨论】：