IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Click et Hover jQuery


Sujet :

jQuery

  1. #1
    Membre éclairé Avatar de PIEPLU
    Profil pro
    Inscrit en
    Avril 2003
    Messages
    507
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Avril 2003
    Messages : 507
    Par défaut Click et Hover jQuery
    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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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/.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éclairé Avatar de PIEPLU
    Profil pro
    Inscrit en
    Avril 2003
    Messages
    507
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Avril 2003
    Messages : 507
    Par défaut
    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.

  4. #4
    Membre éclairé Avatar de PIEPLU
    Profil pro
    Inscrit en
    Avril 2003
    Messages
    507
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Avril 2003
    Messages : 507
    Par défaut
    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);
    		}		
    	});
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Executer un script PHP apres click button en JQuery
    Par facilus68 dans le forum jQuery
    Réponses: 10
    Dernier message: 11/08/2013, 23h01
  2. l'evenement click javascript ou jquery
    Par new_dreams dans le forum jQuery
    Réponses: 6
    Dernier message: 05/05/2012, 04h37
  3. Jquery/AJAX function click qui ne fonctionne pas.
    Par prome dans le forum jQuery
    Réponses: 2
    Dernier message: 12/03/2009, 12h57
  4. [JQuery]style css :hover
    Par Ashgenesis dans le forum jQuery
    Réponses: 4
    Dernier message: 11/04/2008, 15h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo