Question

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

我有以下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（）当然起作用。我的主要目的是当您单击身体部位时，颜色应最初为绿色，然后再次单击相同的身体部位/区域时，颜色应更改为红色，然后再次单击将颜色更改为绿色。但是，通过上面的尝试，它保持红色。请就我能做什么提出建议。

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)行相同

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

点击更改地图区域的颜色

1 个答案: