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 :

Méthodes "addClass" et "removeClass" de jQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Chargé d'affaires
    Inscrit en
    Mars 2011
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Chargé d'affaires
    Secteur : Distribution

    Informations forums :
    Inscription : Mars 2011
    Messages : 29
    Par défaut Méthodes "addClass" et "removeClass" de jQuery
    Bonjour à tous !

    Je débute avec le JQuery et je n'arrive pas à débloquer un problème. .
    J'ai une liste déroulante qui change la couleur d'un texte se trouvant dans une DIV.
    Mais ce code ne fonctionne que partiellement.
    En effet, ma liste ne fonctionne qu'une seule fois.
    Si je choisi rouge mon texte devient rouge et ne peut plus passer vert en le changeant dans ma liste déroulante et inversement.
    A priori, les méthodes "addClass" et "removeClass" de jQuery sont nécessaires pour le bon fonctionnement.
    Merci de votre aide.

    Code html : 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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    	<title>Test</title>
    	<meta charset="UTF-8" />
    	<style type="text/css">
    #color1 {
            color: #F00
    }
    #color2 {
            color: #0C0
    }
    </style>
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    	</head>
     
    	<body>
    <div>
        <select name="maliste" id="liste">
        <option value="0">Faire un choix</option>
        <option value="color1">Rouge</option>
        <option value="color2">Vert</option>
    	</select>
    </div>
     
    <div id="color">Mon texte en couleur</div>
     
    <script>
            $("select[id='liste']").change( function() {
            var couleur = $("select[id='liste'] > option:selected").val();
            $('#color').attr('id', couleur);
            }
            );
            
            
    </script>
    </body>
    </html>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    tu as une erreur de logique dans ton code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $("select[id='liste']").change(function() {
        var couleur = $("select[id='liste'] > option:selected").val();
        $('#color').attr('id', couleur);
    });
    ton $('#color') change d'ID donc tu ne peux donc plus y accéder après ton premier passage.

    Tu aurais meilleur intérêt à utiliser des classes

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