单击函数仅对某些数据名称执行

Question

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

下面定义了"active color states"——点击后颜色状态的变化。我想更改为仅在我选择的几个状态下工作/执行。每个州都有一个 data.name 及其缩写。例如 'OH' 'CA' 'TX" 'NY' 等。活动颜色会在单击其他状态时移除（如下所示）我只需要能够仅使用我的 select 来完成这项工作已选择的州，并非全部 50 个州。

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

Answer 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

Answer 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 数组。

希望对您有所帮助

单击函数仅对某些数据名称执行

click function to only execute on certain data names

javascript

jquery

svg

raphael