Chat GPT gebruiken om JavaScript-code te herschrijven zonder jQuery

Prompt voor ChatGPT om jQuery te herschrijven naar JavaScript

Als je jQuery-code wilt herschrijven naar pure JavaScript met behulp van ChatGPT, ga dan naar chat.openai.com en voer de volgende duidelijke, beknopte prompt in:

Herschrijf de volgende jQuery-code naar vanilla JavaScript met behoud van dezelfde functionaliteit. Zorg voor compatibiliteit met moderne JavaScript-standaarden (ES6+). Voeg ook gebruik van Drupal.behaviors toe indien van toepassing. [Plak hier je jQuery-code]

Vervang de tijdelijke aanduiding [Plak hier je jQuery-code] door de werkelijke jQuery-code die je wilt omzetten.

Hier is een voorbeeld van jQuery- naar JavaScript-code:

(function ($, Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      // Slechts eenmaal uitvoeren per element per paginalading
      $('.my-class', context).once('myBehavior').each(function () {
        $(this).click(function () {
          alert('Element geklikt: ' + $(this).text());
        });
      });

      // Voorbeeld van dynamisch een klasse toevoegen
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

Herschreven JavaScript-code zonder 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('Element geklikt: ' + 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);