Rails JavaScript -使用Rails 7将jQuery转换为Javascript不起作用

piah890a  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(85)

Rails 7支持Turbo / Hotwire。我正在重用从旧的~ 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();
        });
      });


我在一个div中有#info_1/id=info_1,在第一个div正下方的另一个#popup_1/id=popup_1中有弹出窗口#popup_1/id=popup_1
我测试了将JavaScript放在app/javascript/custom/menu.js文件中以及在视图页面的<script></script>标记中使用它。
我该怎么处理这事。
谢啦,谢啦

7tofc5zh

7tofc5zh1#

$()表示你还在使用jquery,你还没有把它转换成普通的JavaScript,但是你已经把它转换成了坏掉的jquery。使用$().someChained函数的每一行都需要替换。例如:
$(document).addEventListener
应该是
document.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项目,而你又不熟悉这门语言,这将是一个非常非常艰巨的任务。

相关问题