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，並且您根本不熟悉該語言，那麼這將是一項非常非常困難的任務。 ###