Convertir code jQuery en JS

gmatg -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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');
          }
        })
      });
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > gmatg
 
Visiblement tu n'as pas regardé tous les liens
le hasClass, addClass, removeClass sont également à changer
0
gmatg > jordane45 Messages postés 38486 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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > 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
gmatg > jordane45 Messages postés 38486 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
Réponse 3 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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)
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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');
    }
     
  });
}
0
gmatg > jordane45 Messages postés 38486 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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > 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 38486 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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > 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');
  }
0

Discussions similaires

Comment passer de .wfp a mp4
Lucasribou -
madmyke -

1 réponse
Convertir chèques cadhoc en chèque amazon
InaMaz -
Cacadhoc -

2 réponses