11480 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour, il m'est demandé de changer mon code javascript en jquery, utilisant les "$" etc.. sauf que je n'y connais rien et je trouve pas de bons tutos donc si certains connaissent un peu, votre aide serait bienvenue Smiley bawling

Voila le code (simplifié) :
http://codepen.io/anon/pen/MegVLa
(en gros j'ai une table et le script permet (en plus d'un plugin de cookie) de garder le style de la table quand on rafraîchit la page (le style change en cliquant sur un bouton))
Et moi je dois changer ce code en jquery.

Merci d'avance Smiley jap
Modifié par Xan (02 Jun 2016 - 14:44)
Bonjour,

Il s'agit d'un simple changement de classe sur un élément tableau, donc :
$( '.buttonTable' ).on( 'click', function() {
  var maTable = $( '#maTable' );
  if( maTable.hasClass( 'table1' ) ) {
    maTable.addClass( 'table2' ).removeClass( 'table1' );
  } else {
    maTable.addClass( 'table1' ).removeClass( 'table2' );
  }
} );

Exemple en ligne : CodePen
Modérateur
Olivier C a écrit :
Bonjour,

Il s'agit d'un simple changement de classe sur un élément tableau, donc :
$( '.buttonTable' ).on( 'click', function() {
  var maTable = $( '#maTable' );
  if( maTable.hasClass( 'table1' ) ) {
    maTable.addClass( 'table2' ).removeClass( 'table1' );
  } else {
    maTable.addClass( 'table1' ).removeClass( 'table2' );
  }
} );

Exemple en ligne : CodePen



Si tu as une class par défaut, tu pourrais n'utiliser que toggleClass...

$( '.buttonTable' ).on( 'click', function() {

  var maTable = $( '#maTable' );

    maTable.toggleClass( 'table2' );
    maTable.toggleClass( 'table1' );
});
Yordi a écrit :

    maTable.toggleClass( 'table2' );
    maTable.toggleClass( 'table1' );


Peut être simplifié comme ceci :

maTable.toggleClass( 'table1 table2' );
Merci à tous pour vos réponses Smiley biggrin

Mais du coup, en faisant comme vous, je n'ai plus de "table.className" du coup je fais comment pour set le cookie? Smiley confused
Administrateur
Xan a écrit :


Bonjour, merci pour cette autre technique, mais on m'oblige d'utilisé jquery Smiley bawling

Oh, désolé, j'ai répondu trop vite en effet Smiley confused
Raphael a écrit :

Oh, désolé, j'ai répondu trop vite en effet Smiley confused


Pas de soucis Smiley biggrin
Yordi a écrit :
Si tu as une class par défaut, tu pourrais n'utiliser que toggleClass...

Effectivement c'est beaucoup mieux.

Code corrigé :
$( '.buttonTable' ).on( 'click', function() {
  var maTable = $( '#maTable' );
    maTable.toggleClass( 'table1 table2' );
} );


CodePen
Modifié par Olivier C (26 May 2016 - 15:02)
Olivier C a écrit :

Effectivement c'est beaucoup mieux.

Code corrigé :
$( '.buttonTable' ).on( 'click', function() {
  var maTable = $( '#maTable' );
    maTable.toggleClass( 'table1 table2' );
} );



Merci, mais comment je fais pour set les cookies dessus? Vu que il y a plus de table.classname ? Smiley ohwell (quand je rafraichit la page, je veux que le style reste)
Modifié par Xan (26 May 2016 - 15:03)
Xan a écrit :
Merci, mais comment je fais pour set les cookies dessus? Vu que il y a plus de table.classname ? Smiley ohwell (quand je rafraichit la page, je veux que le style reste)

Effectivement je n'ai pas traité cette partie du code... Mais je vais laisser les autres alsanautes intervenir car je n'utilise que le webstorage...
Olivier C a écrit :

Effectivement je n'ai pas traité cette partie du code... Mais je vais laisser les autres alsanautes intervenir car je n'utilise que le webstorage...


Ok pas de soucis, merci Smiley biggrin
Bonjour,

Je corrigerai juste le code de Olivier en sortant la déclaration de table en dehors de l'event click (pour que ce soit vraiment utile) :
var maTable = $( '#maTable' )
$( '.buttonTable' ).on( 'click', function() {
    maTable.toggleClass( 'table1 table2' );
})

Pour le code du cookie, il suffit d'initialiser la classe avant le bind click, mais je conseillerai également le localstorage plutôt que le cookie (mais bon, ça se discute aussi).
SolidSnake a écrit :
Bonjour,

Je corrigerai juste le code de Olivier en sortant la déclaration de table en dehors de l'event click (pour que ce soit vraiment utile) :
var maTable = $( '#maTable' )
$( '.buttonTable' ).on( 'click', function() {
    maTable.toggleClass( 'table1 table2' );
})

Pour le code du cookie, il suffit d'initialiser la classe avant le bind click, mais je conseillerai également le localstorage plutôt que le cookie (mais bon, ça se discute aussi).



Bonjour, merci, euh initialiser la classe en jquery c'est à dire je comprends pas trop Smiley ohwell

Oui le localstorage, j'avais déjà vu, mais je préfère les cookies Smiley murf
Modifié par Xan (27 May 2016 - 10:59)
Bonjour,
Xan a écrit :
... euh initialiser la classe en jquery c'est à dire je comprends pas trop Smiley ohwell

Je voulais juste dire ajouter la classe...
Xan a écrit :
Oui le localstorage, j'avais déjà vu, mais je préfère les cookies Smiley murf

Gourmand va ! Smiley yumyum
Modérateur
Hello,

Voici un début de piste :
Je ne sais pas trop comment s'utilise le Get/Set cookie (j'aurai aussi utilisé le localstorage) mais l'idée est là... En le faisant, je me suis dit que ce serait plus facile de passer par un attribut data dédié [data-style] pour ne pas devoir gérer les class. Quelqu'un pour améliorer ?
SolidSnake a écrit :
Bonjour,

Je voulais juste dire ajouter la classe...



Euh ajouter la class avec toggleclass? et ensuite dans Cookies.set comment on fait, je vois pas vraiment.. Smiley confus
Pages :