帶有 Turbo / Hotwire 的 Rails 7。我正在重用從 2018 年舊項(xiàng)目復(fù)制的代碼。此代碼/jQuery 用于信息彈出窗口：
$(document).ready(function() {
$('#info').hover(function() {
$('#popup').show();
}, function() {
$('#popup').hide();
});
});
重寫 javascript 后（正確嗎？），這就是我當(dāng)前正在測試的內(nèi)容 - 未成功：
$(document).addEventListener("DOMContentLoaded", function() {
$('#info_1').onmouseover(function() {
$('#popup_1').show();
}, function() {
$('#popup_1').hide();
});
});
我有 #info_1 / id=info_1 在一個(gè) div 中，彈出 #popup_1 / id=popup_1 在另一個(gè) div 正下方。
我已經(jīng)測試了將 javascript 放置在 app/javascript/custom/menu.js 文件中，以及在視圖頁面上的 標(biāo)記中使用它。
我應(yīng)該如何處理這個(gè)。
謝謝
1
0
0
$() 意味著您仍在使用 jquery，您沒有將其轉(zhuǎn)換為純 JavaScript，但您已將其轉(zhuǎn)換為損壞的 jquery。使用 $().someChained 函數(shù)的每一行都需要替換。例如：
$(文檔).addEventListener
應(yīng)該是
文檔.addEventListener
這是您想要的要點(diǎn)，有一個(gè)注釋要注意 DOMContentLoaded，如果它在偵聽器綁定之前加載，它將永遠(yuǎn)不會(huì)觸發(fā)。
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 替換一個(gè)不平凡的項(xiàng)目 jquery，并且您根本不熟悉該語言，那么這將是一項(xiàng)非常非常困難的任務(wù)。
