Convertir code jQuery en JS

Fermé

gmatg - Modifié le 6 nov. 2020 à 19:48
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 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:

Convertir jquery en javascript
Convertir youtube en mp3 avec audacity - Guide
Telecharger javascript - Télécharger - Langages
Convertir pdf en word excel gratuit - Guide
Telecharger macro convertir chiffre en lettre excel - Télécharger - Tableur
Convertir epub en kindle - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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');
    }
     
  });
}

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

Réponse 2 / 3

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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

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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > gmatg
7 nov. 2020 à 08:53

Visiblement tu n'as pas regardé tous les liens
le hasClass, addClass, removeClass sont également à changer

gmatg > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > 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...

gmatg > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
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

Réponse 3 / 3

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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)

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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');
    }
     
  });
}

gmatg > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > 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)

gmatg > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > 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');
  }

Discussions similaires

convertir des trimestres en ans mois et jours

Convertir une note sur 20 .

transformer un format .cda en mp3

qui connais un convertisseur YouTube MP3

Excel heures en centième

Discussions similaires

Newsletters