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 :

Ajouter une classe et la conserver même après l'évènement


Sujet :

jQuery

  1. #1
    Membre averti

    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    354
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Octobre 2011
    Messages : 354
    Points : 410
    Points
    410
    Par défaut Ajouter une classe et la conserver même après l'évènement
    Bonjour, j'ai du code dynamique qui m'affiche une liste d'éléments, et à chaque pression du keydown du clavier, je souhaiterais ajouter une classe sur l'élément premier, puis le second etc...

    Le problème, c'est que j'ai du mal à agencer mon script ajax et le jquery. Ce qui fait qu'avec le code qui suit, j'ai ma classe qui s'ajoute uniquement lorsque la touche est pressée, dès que je la relève, la classe disparaît. Comment faire pour qu'elle reste?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $("#search").on("keydown", function(e){
       ...
       current.addClass('select');
    });
    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 : 73
    Localisation : Belgique

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

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    j'ai du code dynamique qui m'affiche une liste d'éléments, et à chaque pression du keydown du clavier, je souhaiterais ajouter une classe sur l'élément premier, puis le second, etc.
    Pour du code dynamique Différences entre on() avec 1 ou 2 sélecteurs.

    Si l'élément qui reçoit la classe est affecté ensuite par le code dynamique ce comportement est peut-être normal, mais sans les codes (HTML, CSS, JS) je ne peux rien tester. Il vaudrait peut-être mieux agir sur l'événement "keyup".

    current.addClass( 'select' ); ? current c'est e.target ou this ?

    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 averti

    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    354
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Octobre 2011
    Messages : 354
    Points : 410
    Points
    410
    Par défaut
    Pardon, voilà la fonction entière :

    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
    25
    26
    27
    28
    29
    30
     
    $(window).load(function(){
     
    $("#search").on("keydown", function(e){
     
    	var listItems = $('div#suggests div');
     
    	 var key = e.keyCode,
    	select = listItems.filter('.select'),current=0;
     
    	if ( key != 40 && key != 38 ) return;
     
    	listItems.removeClass('select');
     
    	if ( key == 40 ){ // down
     
    		if ( ! select.length || select.is(':last-child') ) 
    				current = listItems.eq(0);
    		else 	current = select.next();
    	}
    	else if ( key == 38 ){ // up
    		if ( ! select.length || select.is(':first-child') ) 
    				current = listItems.last();		
    		else	current = select.prev();
     
    	}
     
    	current.addClass('select');
    });
    });
    Et le html c'est un input ou à chaque pression du clavier, on a une requête en ajax qui pioche des suggestions, avec un div d'id "suggests" destiné à recevoir les éléments de suggestions.

    j'essaye en variant les paramètres du on() dans le lien mais pour l'instant sans résultat

  4. #4
    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 : 73
    Localisation : Belgique

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

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Comme j'ignore tout du vrai code HTML et des transformations apportées par la transaction AJAX, je ne peux faire qu'un exemple simpliste :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="suggests">
        <div>Un</div>
        <div>Deux</div>
        <div>Trois</div>
        <div>Quatre</div>
        <div>Cinq</div>
    </div>
     
    <input id="search" type="text">

    Code JS : 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
    39
    40
    41
    42
    43
    44
    $( function(){ // forme abrégée de $(document).ready(function(){
     
        $( "#search" ).on( "keydown", function( event ){
     
            var listItems = $( "div", "#suggests" ),
                select = listItems.filter( ".select" ),
                key = event.keyCode,
                current = 0;
     
            if ( key === 40 || key === 38 ){
     
                if ( select.length > 0 ){
     
                    if ( key === 40 ){ // down
     
                        if ( select.is( ':last-child' ) ){
                            current = listItems.eq( 0 );
                        } else {
                            current = select.next();
                        }
     
                    } else { // up
     
                        if ( select.is( ':first-child' ) ){
                            current = listItems.eq( -1 );     
                        } else {
                            current = select.prev();
                        }
                    }
     
                    select.removeClass( 'select' );
                    current.addClass( 'select' );
     
                } else {
                    current = listItems.eq( 0 );
                    current.addClass( 'select' );
                }
     
                $( this ).val( current.text() );
            };
     
        });
     
    });

    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.)

  5. #5
    Membre averti

    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    354
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Octobre 2011
    Messages : 354
    Points : 410
    Points
    410
    Par défaut
    Merci mais le problème persistait, je suis passé par la librairie jquery finalement.

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 27/01/2011, 08h51
  2. Réponses: 0
    Dernier message: 09/11/2010, 12h30
  3. Réaliser une classe se référençant elle-même.
    Par tuxmona dans le forum Débuter avec Java
    Réponses: 5
    Dernier message: 03/12/2009, 15h17
  4. ajouter une classe dans un projet
    Par bonbino dans le forum C++Builder
    Réponses: 4
    Dernier message: 23/10/2006, 15h35
  5. Ajouter une class CSS a une nouvelle cellule
    Par Arfigado dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 26/09/2006, 11h08

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