logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

使用 Chat GPT 重写不依赖 jQuery 的 JavaScript 代码

02/09/2025, by Ivan

用于让 ChatGPT 将 jQuery 重写为 JavaScript 的提示语

如果你希望使用 ChatGPT 将 jQuery 代码重写为纯 JavaScript,请访问 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('Element clicked: ' + $(this).text());
        });
      });

      // 动态添加类的示例
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

重写后的不依赖 jQuery 的 JavaScript 代码:

(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 clicked: ' + 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);