Rails Javascript - La conversion de jQuery en Javascript ne fonctionne pas avec Rails 7

Question

Rails 7 avec Turbo/Hotwire. Je réutilise le code copié d'un ancien projet de 2018. Ce code/jQuery est destiné à la fenêtre contextuelle d'information :

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

Après avoir réécrit le javascript (correct ?), voici ce que je teste actuellement - sans succès :

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

J'ai #info_1 / id=info_1 在一个 div 中，弹出 #popup_1 / id=popup_1 在另一个 div juste en dessous.

J'ai testé son utilisation en plaçant le javascript dans la balise app/javascript/custom/menu.js 文件中，以及在视图页面上的 .

Comment dois-je gérer cela.

Merci

Answer 1

$() signifie que vous utilisez toujours jquery, que vous ne l'avez pas converti en JavaScript simple, mais que vous l'avez converti en jquery cassé. Chaque ligne utilisant la fonction $().someChained doit être remplacée. Par exemple :

$(documentation).addEventListener

devrait être

Documentation.addEventListener

C'est l'essentiel de ce que vous voulez, il y a une note à noter à propos de DOMContentLoaded, s'il se charge avant que l'auditeur ne soit lié, il ne se déclenchera jamais.

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';
  });
});

Remarque, si vous devez remplacer un projet jquery non trivial par plain js et que vous n'êtes pas du tout familier avec le langage, alors cela va être une tâche très, très difficile.