Question

对于互动jQuery US map，我有click:function。

下面定义了＆＃34;活跃的颜色状态＆＃34; - 点击后颜色状态转变。我想改变只在我选择的几个状态下工作/执行。每个州都有一个data.name及其缩写。例如 'OH' 'CA' 'TX" 'NY＆＃39;等待活动颜色在点击时删除另一个状态（如下所示）我只需要能够仅使用我选择的状态，而不是全部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数组。

希望有所帮助

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

2 个答案: