Question

我证明了剧本。它的作品，但在...之外。我不擅长剧本。也许这是一个简单的问题。

<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script src="http://0rochymugen.ucoz.com/scriptbestsite.js" type="text/javascript"></script>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

基本上，当鼠标移到图像上时，脚本只显示

。

$('#img1').mouseover(function () {
$('#p1').show("slow");
});

$("#p1").hover(function () {
$("#p1").hide("slow");
});

当我把脚本放在头上时。简单地说，不起作用。

Answer 1

在某些情况下，如果您尝试对页面上的项目进行操作，如果您在之前加载并执行，则页面的其余部分已完成加载，您将收到错误和/或者你的代码似乎不起作用。

这是建议将链接放到页面底部的javascript文件的一个原因。

另一个好的做法是只在文档加载完成后运行，在jQuery中通常使用以下语法完成：

$(document).ready(function(){ // Your javascript }

Answer 2

我认为您的代码不起作用，因为在文档准备就绪时您没有运行它：

$(document).ready(function(){

  $('#img1').mouseover(function () {
  $('#p1').show("slow");
  });

  $("#p1").hover(function () {
  $("#p1").hide("slow");
  });

  $("#img2").mouseover(function () {
  $('#p2').show("slow");
  });

  $("#p2").hover(function () {
  $("#p2").hide("slow");
  });

  $("#img3").mouseover(function () {
  $('#p3').show("slow");
  });

  $("#p3").hover(function () {
  $("#p3").hide("slow");
  });

  $("#img4").mouseover(function () {
  $('#p4').show("slow");
  });

  $("#p4").hover(function () {
  $("#p4").hide("slow");
  });

  $("#img5").mouseover(function () {
  $('#p5').show("slow");
  });

  $("#p5").hover(function () {
  $("#p5").hide("slow");
  });
});

此外，您可以将两个函数传递给两个悬停处理程序，以处理mouseover和mouseout事件。我认为这会缩短你的代码。 ;）

Answer 3

问题在于您引用的元素尚不存在。

要确保它们在使用之前存在，您必须将其相关代码放在$(document).ready中。所以你有：

    $(document).ready(function(){ //This ensures DOM elements are loaded
      $('#img1').mouseover(function () {
        $('#p1').show("slow");
      });

      $("#p1").hover(function () {
        $("#p1").hide("slow");
      });
    });

但是，如果您无法更改该js文件，要添加document.ready，您可以动态加载脚本，如下所示：

<head>
  ...
  <script type="text/javascript">
     $(document).ready(function(){
        $.getScript("http://0rochymugen.ucoz.com/scriptbestsite.js");
     });
  </script>
  ...
</head>

js脚本（一般情况下）并非强制要求head部分，但这是一个很好的做法恕我直言。但是，出于性能原因，其他人更喜欢将其放在页面底部。希望这会有所帮助。

打开时脚本不起作用

3 个答案: