Convertir code jQuery en JS

gmatg -

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

jordane45 Modérateur

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');
    }
     
  });
}

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éagir

Réponse 2 / 3
jordane45 Modérateur
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

Réagir
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
  
  Réagir
2. jordane45 Modérateur
  
  @gmatgVisiblement tu n'as pas regardé tous les liens
  le hasClass, addClass, removeClass sont également à changer
  
  0
  
  Réagir
3. gmatg
  
  @jordane45alors 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
  
  Réagir
4. jordane45 Modérateur
  
  @gmatgRegarde 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
  
  Réagir
5. gmatg
  
  @jordane45Okee 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éagir

jordane45 Modérateur

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 Modérateur

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
@jordane45Ouai, 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

Réagir
jordane45 Modérateur
@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

Réagir

gmatg

@jordane45Oui 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 Modérateur

@gmatgEt 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