Scroll
使用 Chat GPT 重写不依赖 jQuery 的 JavaScript 代码
用于让 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);