點擊更改地圖區域的顏色

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的值。

示例（我還將顏色移動到了一個色板對象中，並使用了stringCount作為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';
      }
    });

另外，您正在使用分配而不是錯誤地進行比較。

以下行將為colorCounter分配0

if (colourCounter = 0) {
...
}

在檢查值是否為1時，也會發生同樣的情況。

比較應該是

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

還是更好

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

與if (colourCounter = 1)行相同

兩個等號==用於比較值，其中===比較值和類型，這意味着比較嚴格。