Discussion :

[cetteame]

Bonjour,

Question de noob en jquery :

J'ai un input dans lequel un internaute peut y entrer un nombre.
J'aimerai qu'en fonction de sa valeur, ce nombre change de class une première fois.
Et qu'il ne change plus par la suite.

J'ai fait un exemple simplifié ici : http://jsfiddle.net/6pTUW/1/
Si je tape "1", il ne se passe rien et c'est bien.
Si je rajoute "2" (ça mets "12" dans mon input), il change de class et c'est bien.
Mais j'aimerai que ça s'arrête là.
Car si je rajoute "3" (ça mets "123" dans mon input), il ajoute une nouvelle class que je ne souhaite pas. Pourtant ma fonction ne devrait plus s'appliquer à cet input dont la class "dizaine" ne correspond plus au sélecteur ".unite" de la fonction.

Quelle solution simple je peux mettre en place pour corriger ce comportement ?

Merci de votre aide.

[Willpower]

Je ne suis pas certain d'avoir compris l'objectif final, mais d'après ce que j'en ai compris :

unbind keyup devrait faire l'affaire ..

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
$('.unite').keyup(function(){
    var valeur = $(this).val();
    if ( valeur > 9 ) {
        $(this).removeClass('unite');
        $(this).unbind('keyup');
        if ( valeur > 99 ) {
            if ( valeur > 999 ) {
                $(this).addClass('millier');
            }
            $(this).addClass('centaine');
        }
        $(this).addClass('dizaine');
    }
    // Cette partie sert juste à avoir un retour visuel
    var classes = $(this).attr('class');
    $('#class').text(classes);
});

edit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$('.unite').keyup(function(){
    var val= $(this).val();
    var classes = ["unite","dizaine","centaine","millier"];
    if ( val > 9 ) {
        $(this).removeClass('unite');
        $(this).unbind('keyup');
        $(this).addClass(classes[Math.min(4,val.length)-1]);
    }
    // Cette partie sert juste à avoir un retour visuel
    $('#class').text($(this).attr('class'));
});

​

[cetteame]

Super ! C'est exactement ce que je cherchais : .unbind('keyup');

Et en plus tu propose d'autres modifications qui rendent le code bien plus élégant.

Merci beaucoup.