Изменить цвет области карты при нажатии - PullRequest
Новая
       26

Изменить цвет области карты при нажатии

0 голосов
/ 05 декабря 2018

У меня есть код карты на изображении человеческого тела, и области используются для каждой отдельной части тела.

У меня есть следующий код 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');
  });
});

Iя пытаюсь заставить maphilight () работать, конечно, наведя курсор на первую строку кода.Моя главная цель состоит в том, чтобы при щелчке мышью на части тела цвет сначала должен быть зеленым, а затем при повторном щелчке по той же части тела / области он должен измениться на красный, а при повторном щелчке по нему цвет снова станет зеленым.Однако, с моей попыткой выше, он остается красным.Пожалуйста, посоветуйте, что я могу сделать.

1 Ответ

0 голосов
/ 05 декабря 2018

Проблема в том, что вы проверяете значение переменной, а затем назначаете обработчик клика.Поскольку 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)

Два знака равенства == используются для сравнения значений, где === сравнивает значение и тип, то есть он более строгий.

...