Utilizzare ChatGPT per riscrivere codice JavaScript senza jQuery

Prompt per ChatGPT per riscrivere codice jQuery in JavaScript

Se desideri riscrivere del codice jQuery in JavaScript puro utilizzando ChatGPT, vai su chat.openai.com e inserisci il seguente prompt chiaro e conciso:

Per favore, riscrivi il seguente codice jQuery in JavaScript vanilla, mantenendo la stessa funzionalità. Assicurati che sia compatibile con gli standard moderni di JavaScript (ES6+). Includi anche l'uso di Drupal.behaviors se applicabile. [Incolla qui il tuo codice jQuery]

Sostituisci il segnaposto [Incolla qui il tuo codice jQuery] con il codice jQuery che desideri convertire.

Ecco un esempio di codice da jQuery a JavaScript:

(function ($, Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      // Esegui una sola volta per elemento a caricamento pagina
      $('.my-class', context).once('myBehavior').each(function () {
        $(this).click(function () {
          alert('Elemento cliccato: ' + $(this).text());
        });
      });

      // Esempio di aggiunta dinamica di una classe
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

Codice JavaScript riscritto senza 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('Elemento cliccato: ' + 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);