Utilisation de Chat GPT pour réécrire du code JavaScript sans jQuery

Invite pour ChatGPT afin de réécrire jQuery en JavaScript

Si vous souhaitez réécrire du code jQuery en JavaScript pur avec ChatGPT, allez sur chat.openai.com et saisissez l’invite claire et concise suivante :

Veuillez réécrire le code jQuery suivant en JavaScript vanilla, en conservant la même fonctionnalité. Assurez-vous que le code soit compatible avec les standards modernes de JavaScript (ES6+). Incluez également l’utilisation de Drupal.behaviors si applicable. [Collez votre code jQuery ici]

Remplacez le texte [Collez votre code jQuery ici] par le code jQuery réel que vous souhaitez convertir.

Voici un exemple de code jQuery réécrit en JavaScript :

(function ($, Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      // Ne s’exécute qu’une fois par élément et par chargement de page
      $('.my-class', context).once('myBehavior').each(function () {
        $(this).click(function () {
          alert('Élément cliqué : ' + $(this).text());
        });
      });

      // Exemple d’ajout dynamique d’une classe
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

Code JavaScript réécrit sans jQuery :

(function (Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      context.querySelectorAll('.my-class').forEach(function(element) {
        if (!element.dataset.myBehaviorAttached) {
          element.dataset.myBehaviorAttached = true;
          element.addEventListener('click', function () {
            alert('Élément cliqué : ' + element.textContent);
          });
        }
      });

      context.querySelectorAll('.toggle-button').forEach(function(button) {
        if (!button.dataset.toggleBehaviorAttached) {
          button.dataset.toggleBehaviorAttached = true;
          button.addEventListener('click', function () {
            document.querySelectorAll('.toggle-target').forEach(function(target) {
              target.classList.toggle('active');
            });
          });
        }
      });
    }
  };
})(Drupal);