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

Question

我有这个 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"),

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