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

Version imprimable

16/08/2014, 18h08
dev14

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:

1 2 3 4 $("#search").on("keydown", function(e){ ... current.addClass('select'); });
Merci
16/08/2014, 23h02
danielhagnoul

Bonsoir

Citation:

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 :fleche: 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 ?

Pardon, voilà la fonction entière :

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

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:

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:

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

18/08/2014, 12h23
dev14

Merci mais le problème persistait, je suis passé par la librairie jquery finalement.