[Résolu] Convertir code javascript en jquery

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

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
Modifié par Xan (02 Jun 2016 - 14:44)

Bonjour !

Je n'y connais rien non plus en Jquery mais j'avais trouvé cette page d'équivalence il y a longtemps :
http://youmightnotneedjquery.com/

Zelena a écrit :
Bonjour !

Je n'y connais rien non plus en Jquery mais j'avais trouvé cette page d'équivalence il y a longtemps :
http://youmightnotneedjquery.com/

Je vais regarder ça, merci

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

Mais du coup, en faisant comme vous, je n'ai plus de "table.className" du coup je fais comment pour set le cookie?

Raphael a écrit :
Hello,

Sans jQuery, il est également possible de faire appel au très pratique monelement.classList.toggle('maclasse'); qui est fait pour ça

http://www.alsacreations.com/article/lire/1498-lapi-classlist.html

Bonjour, merci pour cette autre technique, mais on m'oblige d'utiliser jquery
Modifié par Xan (26 May 2016 - 14:49)

Xan a écrit :


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

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

Raphael a écrit :

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

Pas de soucis

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

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,

Xan a écrit :
... euh initialiser la classe en jquery c'est à dire je comprends pas trop

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

Gourmand va !

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