Discussion :

[PIEPLU]

Bonjour,



J'ai fait ce bout de code qui fonctionne presque et qui permet de faire un hover sur une carte et de cliquer sur des zones.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	$('#' + id + '').hover(function() {
		$(this).click();
	}).click(function(){
		var currentColor = rgb2hex($(this).find("path").css("fill"));
		if(currentColor != defaultColor) {
			$(this).find("path").css('fill', defaultColor);
			$('#' + id + '').click(function() {
				$(this).find("path").attr('click', 'OK');
			});
		}
		else {
			$(this).find("path").css('fill', color);
		}
	});

Mon souci, c'est quand je passe sur une zone déjà cliqué, il change la couleur, ce que je ne veux pas.



Une idée ?



Merci

[danielhagnoul]

Donner une classe aux éléments cliqués et vérifier que cette classe est absente avant de modifier la couleur. Voir http://api.jquery.com/hasClass/.

[PIEPLU]

Le souci il me semble c'est que le hover/click sont confondus.
Car si je teste ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function hoverMap(id, color) {
	$('#' + id + '').hover(function() {
		$(this).click();
	}).click(function(){
		$('#' + id + '').click(function() {
			alert('ok');
		});
		var currentColor = rgb2hex($(this).find("path").css("fill"));
		if(currentColor != defaultColor) {
			$(this).find("path").css('fill', defaultColor);
			$('#' + id + '').click(function() {
				$(this).find("path").attr('click', 'OK');
			});
		}
		else {
			$(this).find("path").css('fill', color);
		}
	});
}

Mon alert OK apparait sans que je clique, et c'est tout là le problème.

[PIEPLU]

J'ai réussi en faisant ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function hoverMap(id, color) {
	$('#' + id + '').hover(function() {
		if($('#' + id + '').hasClass('click')) {
			$('#' + id + '').find("path").css('fill', color);
		} else if($('#' + id + '').hasClass('remove-click')) {
			$('#' + id + '').removeClass('remove-click');
		} else {
			toggleColor(id, defaultColor, color);
		}
	});
 
	$('#' + id + '').click(function(){
		if($('#' + id + '').hasClass('click')) {
			$('#' + id + '').find("path").css('fill', defaultColor);
			$('#' + id + '').removeClass('click');
			$('#' + id + '').addClass('remove-click');
		} else {
			console.log('4');
			$('#' + id + '').removeClass('remove-click');
			$('#' + id + '').addClass('click');
			$('#' + id + '').find("path").css('fill', color);
		}		
	});
}