0

我在人体图像上有一个地图代码，每个身体部位都使用了区域。

我有以下JS代码...

// Display body map.
$('#human-body').maphilight();

var colourCounter = 0
if (colourCounter = 0) {
  $('map area').click(function(e){  
      $('#human-body').maphilight({ 
      fillColor: '00ff00', strokeColor:'000000' //green
      }); 
  });
  colourCounter = 1 
};

if (colourCounter = 1) {
  $('map area').click(function(e){  
      $('#human-body').maphilight({ 
      fillColor: 'ff0000', strokeColor:'000000' // red
      }); 
  });
  colourCounter = 1 
};

// Make the clicked area selected.
$('map area').click(function(e) {
  e.preventDefault();
  // Remember clicked area.
  var clickedArea = $(this);
  // For each area...
  $('map area').each(function() {
    // get
    hData = $(this).data('maphilight') || {};
    // modify
    hData.alwaysOn = $(this).is(clickedArea);
    // set
    $(this).data('maphilight', hData ).trigger('alwaysOn.maphilight');
  });
});

我正在尝试通过将鼠标悬停在第一行代码上来使 maphilight() 正常工作。我的主要目标是当您单击身体部位时，颜色最初应为绿色，然后当您再次单击同一身体部位/区域时，它应变为红色，再次单击它会将颜色变为绿色。但是，通过我上面的尝试，它保持红色。请就我能做什么提出建议。

4

1 回答 1

0

问题是您正在检查变量的值，然后分配一个单击处理程序。由于colorCounter在开始时设置为 0，因此只创建了一个单击处理程序。

colorCounter您应该从click handler 内部检查 的值。

示例（我还将颜色移动到一个样本对象中，并为 colorCounter 使用字符串值......现在可能应该重命名 ^_^ ）：

  var currentColor = 'green';

  // object with color swatches
  var fills = {
    green: { fillColor: '00ff00', strokeColor:'000000'},
    red:   { fillColor: 'ff0000', strokeColor:'000000'}
  }

  $('map area').click(function(e){  
      // use swatch object to higlight
      $('#human-body').maphilight(fills[currentColor]);

      // switch out the colors
      if (currentColor == 'green') {
        currentColor = 'red';
      } else {
        currentColor = 'green';
      }
    });

此外，您错误地使用了赋值而不是比较。

以下行将仅将 0 分配给colorCounter 

if (colourCounter = 0) {
...
}

在您检查值是否为 1 时也会发生同样的情况。

比较应该是

if (colourCounter == 0) {
...
}

或者更好

if (colourCounter === 0) {
...
}

与线相同if (colourCounter = 1)

两个等号==用于比较值，其中===比较值和类型，这意味着它更严格。

于 2018-12-04T23:17:30.573 回答