I have a map code on an image of the human body and areas are used for each individual body part.
I have the following JS code...
// 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 am trying to make the maphilight() work of course by hovering by first line of code. My main aim is to when you have clicked on a body part, the colour should initially be green and then when you click the same body part/area again it should change to red, and clicking on it again changes colour back to green. However, with my attempt above, it stays on red. Please advice on what I could do.
The problem is that you're checking for the value of the variable, and then assigning a click handler. Since the colorCounter
is set to 0 at the start, only a single click handler is created.
You should check for the value of colorCounter
from inside of the click handler .
Example (I've also moved the colors into a swatch object and used string values for the colorCounter... which should probably be renamed now ^_^ ):
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';
}
});
Also, you are using assignment instead of comparison by mistake.
The following line will just assign 0 to the colorCounter
if (colourCounter = 0) {
...
}
The same happens where you're checking if the value is 1.
The comparison should be
if (colourCounter == 0) {
...
}
Or better yet
if (colourCounter === 0) {
...
}
Same for line with if (colourCounter = 1)
Two equal signs ==
are used for comparing values, where ===
compares value and the type, meaning it's more strict.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.