发表新帖
发表新帖

Script does not work when on <head>

后端 未结
关注
3 1115
一向
一向 2020-12-11 09:37

I proved script. its works, but outside of . I am not good on script. maybe its a simple problem.
相关标签:
3条回答
  • 臣服心动
    2020-12-11 09:42

    I think your code doesn't work because you're not running it when document's ready:

    $(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");
  });
});

    Also you can pass two functions two your hover handler to handle both mouseover and mouseout events. I think that'll shorten your code a bit. ;)

    0 讨论(0)
  • 一生所求
    2020-12-11 09:55

    The problem is that the elements you are referencing, don't exist yet.

    To ensure they exist before using them, you have to put it's related code inside $(document).ready. So you have:

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

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

    But, if you can't change that js file, to add a document.ready, you could load the script dynamically, as the following:

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

    It's not mandatory for the js scripts (in general) to be on the head section, but it's a good practice IMHO. However, other people prefer to put it at the bottom of the page for performance reasons. Hope this helps.

    0 讨论(0)
  • 囚心锁ツ
    2020-12-11 10:01

    In some cases, if you are trying to operate on items that are on the page, if you javascript loads and executes before the rest of the page has finished loading, you will get errors and/or your code will not appear to work.

    This is one reason it is recommended to put links to javascript files at the bottom of the page.

    Another good practice is to only run your when the document has finished loading, in jQuery is is normally done using the following syntax:

    $(document).ready(function(){
   // Your javascript
}
    0 讨论(0)
 看不清?
提交回复
热议问题