Rails Javascript - Menukar jQuery kepada Javascript tidak berfungsi menggunakan Rails 7

Question

Rails 7 dengan Turbo/Hotwire. Saya menggunakan semula kod yang disalin daripada projek lama dari 2018. Kod/jQuery ini adalah untuk pop timbul maklumat:

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

Selepas menulis semula javascript (betul ke?), inilah yang sedang saya uji - tidak berjaya:

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

Saya ada #info_1 / id=info_1 在一个 div 中，弹出 #popup_1 / id=popup_1 在另一个 div betul-betul di bawah.

Saya telah menguji menggunakannya dengan meletakkan javascript dalam tag app/javascript/custom/menu.js 文件中，以及在视图页面上的 .

Bagaimana saya harus menangani ini.

Terima kasih

Answer 1

$() bermakna anda masih menggunakan jquery, anda belum menukarnya kepada JavaScript biasa, tetapi anda telah menukarnya kepada jquery rosak. Setiap baris yang menggunakan fungsi $().someChained perlu diganti. Contohnya:

$(dokumentasi).addEventListener

sepatutnya

Dokumentasi.addEventListener

Ini adalah intipati perkara yang anda mahukan, terdapat nota untuk diperhatikan tentang DOMContentLoaded, jika ia dimuatkan sebelum pendengar terikat, ia tidak akan pernah menyala.

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

Nota sampingan, jika anda perlu menggantikan jquery projek yang tidak remeh dengan js biasa, dan anda tidak biasa dengan bahasa itu sama sekali, maka ini akan menjadi tugas yang sangat, sangat sukar.