Convertir code jQuery en JS

gmatg -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention - 10 nov. 2020 à 18:37

Salut à tous,
Je viens vers vous car je bloque sur ptit truc. J'ai fais un code en jQuery mais je n'arrive pas à le convertir en pure JS (car je ne veux pas avoir de jQuery sur mon site). J'ai déjà fais quelques petits trucs mais je n'aboutit pas au résultat souhaiter. Pouvez vous m'aider ?
Merci beaucoup d'avance pour l'aide

      $(document).ready(function(){
        $('.menu-icon').click(function(e){
          e.preventDefault();
          $this = $(this);
          if($this.hasClass('is-opened')){
            $this.addClass('is-closed').removeClass('is-opened');
          }else{
            $this.removeClass('is-closed').addClass('is-opened');
          }
        })
      });

Afficher la suite

3 réponses

Réponse 1 / 3
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
Humm... mouais...

Donc, ton code devrait ressembler à un truc du genre
```
function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

var menuicon = document.getElementsByClassName('menu-icon');

for(let i = 0; i < menuicon.length; i++) {
  menuicon[i].addEventListener("click", function(){
    e.preventDefault();
    if (this.hasClass('is-opened')){
      this.classList.add('is-closed').classList.remove('is-opened');
    } else {
      this.classList.remove('is-clossed').classList.add('is-opened');
    }
     
  });
}
```
1
1. gmatg
  
  Salut Jordane, je pensais faire comme toi pour "boucle", mais cela ne fonctionne pas. Je vois plusieurs éléments qui ne sont pas définis et tout à bordel dans les "is not a function". Là franchement je n'ai pas d'idée pour faire fonctionner mon code HTML.
  Si quelqu'un veut bien éclairer.
  Merci d'avance
  
  0
Réponse 2 / 3
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour,

Avec ça, tu devrais déjà pouvoir réécrire une bonne partie de ton code
https://putaindecode.io/articles/de-jquery-a-vanillajs/
https://www.google.com/search?q=vanilla+js+hasClass
https://codepen.io/tylerama/pen/nLFHt
0
1. gmatg
  
  Bonjour, j'ai réussi (grâce à tes liens, encore une fois merci) à convertir en js, mais ca ne fonctionne pas... Peux tu y jeter un coup d'œil et me dire pourquoi cela ne fonctionne pas.
  Merci d'avance et à bientôt
  
  //code jQuery $(document).ready(function(){ $('.menu-icon').click(function(e){ e.preventDefault(); $this = $(this); if($this.hasClass('is-opened')){ $this.addClass('is-closed').removeClass('is-opened'); }else{ $this.removeClass('is-closed').addClass('is-opened'); } }) }); //code JS pure document.getElementsByClassName('menu-icon').addEventListener('click', function(e) { e.preventDefault(); if (this.hasClass('is-opened')) { this.addClass('is-closed').removeClass('is-opened'); } else { this.removeClass('is-clossed').addClass('is-opened'); } });
  
  0
  1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > gmatg
    
    Visiblement tu n'as pas regardé tous les liens
    le hasClass, addClass, removeClass sont également à changer
    
    0
  2. gmatg > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
    
    alors du coup j'ai fais ca :
    document.getElementsByClassName('menu-icon').addEventListener('click', function(e) { e.preventDefault(); if (this.getElementsByClassName('is-opened')) { this.classList.add('is-closed').classList.remove('is-opened'); } else { this.classList.remove('is-clossed').classList.add('is-opened'); } });
    
    Mais ca ne fonctionne pas… Il m'indique : document.getElementsByClassName(...).addEventListener is not a function
    Que faut-il faire ?
    Merci beaucoup pour l'aide
    
    0
  3. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > gmatg
    
    Regarde la documentation de la fonction getElementsByClassName
    https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName
    
    cela retourne un ARRAY
    Il faut donc boucler dessus...
    
    0
  4. gmatg > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
    
    Okee mais je ne vois pas trop comment faut il faire. Aurai tu la gentillesse de me montrer comment faut il faire pour résoudre mon problème. J'ai beau cherché sur plein de sites, je ne trouves aucune réponses à mon problème.
    Merci beaucoup d'avance
    
    0

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Si tu ne nous montres pas les messages d'erreur exacts ..... ni ton code ... il sera impossible de t'aider à corriger.

Donc, commence par nous montrer le code complet ( html ET javascript)

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

petite erreur de ma part dans le code que je t'avais donné.
Essaye celui la

function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

var menuicon = document.getElementsByClassName('menu-icon');

for(let i = 0; i < menuicon.length; i++) {
  menuicon[i].addEventListener("click", function(){
    e.preventDefault();
    if (hasClass(this,'is-opened')){
      this.classList.add('is-closed').classList.remove('is-opened');
    } else {
      this.classList.remove('is-clossed').classList.add('is-opened');
    }
     
  });
}

gmatg > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
Ouai, ce script me parait plus fonctionel, mais j'ai quand même une erreur :
Uncaught TypeError: this.classList.remove(...) is undefined
Uncaught TypeError: this.classList.add(...) is undefined

Normalement il n'y a pas besoin de définir ce genre de truc ? Où est ce le
```
this.
```
qui pose problème ?
Merci pour l'aide
0
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > gmatg

ça peut, en effet, venir du this.
je ne fais que rarement du vanilla js....

Mais je répète

Donc, commence par nous montrer le code complet ( html ET javascript)
0

gmatg > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

Oui désolé, se serai plus simple si je te donne tout.

<html>
  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body{
        background-color: #1f1f1f;
      }

      .menu-icon{
          position: relative;
          width: 54px;
          height: 54px;
          background-color: transparent;
          border-radius: 50%;
          transition: transform 0.5s;
      }

      .menu-icon .icon_span{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%); 
          width: 22px;
          height: 2px;
          background-color: #fff;
          transition: background 0.5s, transform 0.5s;
          transition: background 0.5s steps(1, end);
      }

      .icon_span::before, .icon_span::after{
          transform-origin: 100% 50%;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 22px;
          height: 2px;
          transform: translateY(-8px);
          background-color: #fff;
          transition: transform 0.5s;
      }

      .icon_span::after{
          transform: translateY(8px);
      }

      /*.menu-icon:hover .icon_span::before{
          transform: translateY(-10px);
      }

      .menu-icon:hover .icon_span::after{
          transform: translateY(10px);
      }*/

      svg{
          opacity: 0;
          fill: transparent;
          stroke: #fff;
          stroke-width: 2px;
          stroke-dasharray: 22 230;
          transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s, opacity 0.5s steps(1, end);
      }

      .menu-icon.is-opened .icon_span{
          transition: background 0.5s steps(1, start);
          background-color: transparent;
      }

      .menu-icon.is-opened svg{
          opacity: 1;
          stroke-dasharray: 160;
          stroke-dashoffset: -65;
          transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s, opacity 0.5s steps(1, start);
      }

      .menu-icon.is-opened .icon_span::before{
          transform: translateX(-3px) translateY(-8px) rotate(-45deg);
      }

      .menu-icon.is-opened .icon_span::after{
          transform: translateX(-3px) translateY(8px) rotate(45deg);
      }
    </style>
    <title>Test Icon</title>
  </head>

  <body>
    <div class="menu-icon">
      <div class="icon_span"></div>
      <svg x="0" y="0"  width="54px" height="54px" viewBox="0 0 54 54">
        <path d="M16.500,27.000 C16.500,27.000 24.939,27.000 38.500,27.000 C52.061,27.000 49.945,15.648 46.510,11.367 C41.928,5.656 34.891,2.000 27.000,2.000 C13.193,2.000 2.000,13.193 2.000,27.000 C2.000,40.807 13.193,52.000 27.000,52.000 C40.807,52.000 52.000,40.807 52.000,27.000 C52.000,13.000 40.837,2.000 27.000,2.000"></path>
      </svg>
    </div>

    <script>
      function hasClass( target, className ) {
          return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
      }
      var menuicon = document.getElementsByClassName('menu-icon');
      for(let i = 0; i < menuicon.length; i++) {
        menuicon[i].addEventListener("click", function(){
          //e.preventDefault();
          if (hasClass(this,'is-opened')){
            this.classList.add('is-closed').classList.remove('is-opened');
          } else {
            this.classList.remove('is-clossed').classList.add('is-opened');
          }
          
        });
      }
      //code jQuery à remplacer par du JS pure
      /*$(document).ready(function(){
        $('.menu-icon').click(function(e){
          e.preventDefault();
          $this = $(this);
          if($this.hasClass('is-opened')){
            $this.addClass('is-closed').removeClass('is-opened');
          }else{
            $this.removeClass('is-closed').addClass('is-opened');
          }
        })
      });*/
    </script>
  </body>
</html>

Merci beaucoup pour ton aide

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > gmatg

Et oui, tu ne peux pas chainer les fonctions en "pure" js

if (hasClass(this,'is-opened')){
    this.classList.add('is-closed');
    this.classList.remove('is-opened');
  } else {
    this.classList.remove('is-clossed');
    this.classList.add('is-opened');
  }

Convertir code jQuery en JS

3 réponses

Discussions similaires

Newsletters