Rails Javascript – Die Konvertierung von jQuery in Javascript funktioniert mit Rails 7 nicht

Question

Rails 7 mit Turbo/Hotwire. Ich verwende Code wieder, der aus einem alten Projekt aus dem Jahr 2018 kopiert wurde. Dieser Code/diese jQuery ist für das Informations-Popup:

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

Nachdem ich das Javascript neu geschrieben habe (richtig?), teste ich gerade Folgendes – ohne Erfolg:

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

Ich habe #info_1 / id=info_1 在一个 div 中，弹出 #popup_1 / id=popup_1 在另一个 div direkt unten.

Ich habe die Verwendung getestet, indem ich das Javascript in das app/javascript/custom/menu.js 文件中，以及在视图页面上的 -Tag eingefügt habe.

Wie soll ich damit umgehen?

Danke

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，并且您根本不熟悉该语言，那么这将是一项非常非常困难的任务。