Verwendung von Chat GPT zur Überarbeitung von JavaScript-Code ohne jQuery

Prompt für ChatGPT, um jQuery in JavaScript umzuschreiben

Wenn Sie jQuery-Code mithilfe von ChatGPT in reines JavaScript umschreiben möchten, navigieren Sie zu chat.openai.com und geben Sie den folgenden klaren, präzisen Prompt ein:

Bitte schreibe den folgenden jQuery-Code in Vanilla JavaScript um und behalte dabei die gleiche Funktionalität bei. Stelle die Kompatibilität mit modernen JavaScript-Standards (ES6+) sicher. Integriere zudem die Verwendung von Drupal.behaviors, falls zutreffend. [Fügen Sie hier Ihren jQuery-Code ein]

Ersetzen Sie den Platzhalter [Fügen Sie hier Ihren jQuery-Code ein] durch den tatsächlichen jQuery-Code, den Sie konvertieren möchten.

Hier ist ein Beispiel für die Umwandlung von jQuery in JavaScript-Code:

(function ($, Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      // Wird pro Element nur einmal pro Seitenaufruf ausgeführt
      $('.my-class', context).once('myBehavior').each(function () {
        $(this).click(function () {
          alert('Element geklickt: ' + $(this).text());
        });
      });

      // Beispiel zum dynamischen Hinzufügen einer Klasse
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

Umgeschriebener JavaScript-Code ohne 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 geklickt: ' + 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);