Rails Javascript - 使用 Rails 7 将 jQuery 转换为 Javascript 不起作用

Question

带有 Turbo / Hotwire 的 Rails 7。我正在重用从 2018 年旧项目复制的代码。此代码/jQuery 用于信息弹出窗口：

$(document).ready(function() {
      $('#info').hover(function() {
        $('#popup').show();
        }, function() {
        $('#popup').hide();
        });
      });

重写 javascript 后（正确吗？），这就是我当前正在测试的内容 - 未成功：

$(document).addEventListener("DOMContentLoaded", function() {
      $('#info_1').onmouseover(function() {
        $('#popup_1').show();
        }, function() {
        $('#popup_1').hide();
        });
      });

我有 #info_1 / id=info_1 在一个 div 中，弹出 #popup_1 / id=popup_1 在另一个 div 正下方。

我已经测试了将 javascript 放置在 app/javascript/custom/menu.js 文件中，以及在视图页面上的 标记中使用它。

我应该如何处理这个。

谢谢

Answer 1

$() 意味着您仍在使用 jquery，您没有将其转换为纯 JavaScript，但您已将其转换为损坏的 jquery。使用 $().someChained 函数的每一行都需要替换。例如：

$(文档).addEventListener

应该是

文档.addEventListener

这是您想要的要点，有一个注释要注意 DOMContentLoaded，如果它在侦听器绑定之前加载，它将永远不会触发。

document.addEventListener('DOMContentLoaded', function() {
  var info = document.getElementById('info');
  var popup = document.getElementById('popup');

  info.addEventListener('mouseenter', function() {
    popup.style.display = 'block';
  });

  info.addEventListener('mouseleave', function() {
    popup.style.display = 'none';
  });
});

旁注，如果您需要用普通的 js 替换一个不平凡的项目 jquery，并且您根本不熟悉该语言，那么这将是一项非常非常困难的任务。