Click et Hover jQuery

Version imprimable

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:

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

21/07/2016, 21h58
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/.

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

Code:

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.

J'ai réussi en faisant ainsi :

Code:

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);
		}		
	});
}