javascript - 单击更改 map 区域的颜色

Question

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

我有以下 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() 正常工作。我的主要目标是当你点击一个 body 部位时，颜色最初应该是绿色，然后当你再次点击同一个 body 部位/区域时它应该变成红色，再次点击它会将颜色变回绿色。但是，通过我上面的尝试，它保持红色。请就我能做什么提出建议。

Answer 1

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

您应该从点击处理程序内部检查 colorCounter 的值。

示例(我还将颜色移动到色板对象中，并为 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) 的行相同

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