时间戳

首页 > 解决方案 > 我的 Javascript 文件和 jQuery 没有链接到我的 html 文件（所有内容都在同一个文件夹中，并且没有拼写错误）

javascript - 我的 Javascript 文件和 jQuery 没有链接到我的 html 文件（所有内容都在同一个文件夹中，并且没有拼写错误）

问题描述

我刚开始编码，遇到了一个看起来很明显的问题。我在 HTML 文件中编写了 HTML 代码，在 CSS 文件中编写了 CSS 代码。我已将两者放在同一个项目文件夹中。

为了使我的网站动画化，我决定使用 jQuery 在 .js 文件中编写 Javascript 代码。我将最新版本的 jQuery 下载到与该项目的所有其他文件相同的文件夹中。

CSS 链接得很好，但不是 Javascript。（我需要一些俄语文本，所以我按照这个论坛的答案中的说明进行操作）。我正在使用原子。

这是我的代码（文件很长，所以我不会包含全部内容，只包含 javascript 元素......我确实做了一个来测试它，但似乎没有任何效果）：

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Language" content="ru">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery-3.3.1.min.js"></script>
  <script  src="main.js"></script>
</head>
<body>
  <div class="out"><p>Test</p>
  </div>
</body>
</html>

这是我在 main.js 上写的，看看它是否有效：

$(document).ready(function() => {
    $('.out').on('mouseover', ()=>{
      $('.out').hide();
    });
});

正如你所看到的，当鼠标移过它时，我试图让这部分隐藏起来。我也尝试了“点击”并且没有事件。我没有在 main.js 中输入任何其他内容......是否应该有一些东西可以通知它进入哪个文档？

此外，在 HTML 中，我还尝试指定类型（尽管不是必需的）。它也没有工作。

我不知道我是不是打错字了……我怀疑可能是因为我把它们都放在了同一个项目文件中。项目文件就在我的桌面上。这可能是问题的原因吗？

编辑我已将 main.js 文件更改为：

$(document).ready(() => {
    $('.out').on('mouseover', ()=>{
      $('.out').hide();
    });
});

但它仍然不起作用......

标签： javascriptjqueryhtml

解决方案

=>从中删除$(document).ready(function() => {，它将起作用（它位于单独的 js 文件中或添加到 HTML 页面本身中）

工作片段： -

$(document).ready(function(){
  $('.out').on('mouseover', ()=>{
    $('.out').hide();
  });
});
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Language" content="ru">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--used live jquery library to make it working -->
</head>
<body>
  <div class="out"><p>Test</p>
  </div>
</body>
</html>

注意：- 你也可以这样做

$(document).ready(()=>{
  $('.out').on('mouseover', ()=>{
    $('.out').hide();
  });
});

运行输出：- https://jsfiddle.net/npthjwu1/

更清洁的方法：-

$(document).ready(function(){ 
  $('.out').on('mouseover',function(){ 
     $('.out').hide(); 
  }); 
});

推荐阅读