Օգտագործելով Chat GPT՝ JavaScript կոդը վերաշարադրելու համար առանց jQuery-ի։

Հրահանգ ChatGPT-ին՝ jQuery-ից JavaScript վերաշարադրելու համար

Եթե ցանկանում եք վերաշարադրել jQuery կոդը մաքուր JavaScript-ի՝ օգտագործելով ChatGPT, անցեք chat.openai.com և մուտքագրեք հետևյալ հստակ և հակիրճ հրահանգը․

Խնդրում եմ վերաշարադրեք հետևյալ jQuery կոդը մաքուր JavaScript-ի՝ պահպանելով նույն ֆունկցիոնալությունը։ Համոզվեք, որ այն համապատասխանում է ժամանակակից JavaScript ստանդարտներին (ES6+)։ Եթե կիրառելի է, ներառեք նաև Drupal.behaviors-ի օգտագործումը։ [Այստեղ տեղադրեք ձեր jQuery կոդը]

Փոխարինեք [Այստեղ տեղադրեք ձեր jQuery կոդը] հատվածը ձեր վերաշարադրելիք jQuery կոդով։

Ահա օրինակ jQuery կոդի՝ վերաշարադրված JavaScript տարբերակով․

(function ($, Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      // Յուրաքանչյուր տարրի վրա գործարկել միայն մեկ անգամ էջի բեռնումից հետո
      $('.my-class', context).once('myBehavior').each(function () {
        $(this).click(function () {
          alert('Տարրը սեղմվել է՝ ' + $(this).text());
        });
      });

      // Օրինակ՝ դինամիկ class ավելացնելու
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

Վերաշարադրված JavaScript կոդ՝ առանց 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.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);