Sujet Précédent Sujet Suivant

Convertir code jQuery en JS

Fermé
gmatg - Modifié le 6 nov. 2020 à 19:48
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 - 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');
          }
        })
      });
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
Modifié le 8 nov. 2020 à 09:57
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
8 nov. 2020 à 19:18
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
6 nov. 2020 à 19:56
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
7 nov. 2020 à 08:48
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740 > gmatg
7 nov. 2020 à 08:53
Visiblement tu n'as pas regardé tous les liens
le hasClass, addClass, removeClass sont également à changer
0
gmatg > jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025
7 nov. 2020 à 11:57
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740 > gmatg
7 nov. 2020 à 12:21
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025
8 nov. 2020 à 09:38
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
8 nov. 2020 à 19:33
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
8 nov. 2020 à 19:35
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025
Modifié le 8 nov. 2020 à 20:08
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740 > gmatg
8 nov. 2020 à 20:06
ç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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025
8 nov. 2020 à 21:25
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 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740 > gmatg
8 nov. 2020 à 21:30
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

convertir des trimestres en ans mois et jours
Cambouie44 -
Cambouie44 -

6 réponses
qui connais un convertisseur YouTube MP3
Utilisateur anonyme -
Paco -

4 réponses
Comment passer de .wfp a mp4
Lucasribou -
madmyke -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses