Скрипт не работает при

ProgramBox

Скрипт не работает при

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я проверил скрипт. он работает, но за пределами . Я не силен в скрипте. возможно, это простая проблема.

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

когда я помещаю скрипт в head. просто не работает.

1. Как это не работает? Что не работает? Пожалуйста, добавьте больше деталей

2. Это должно сработать, кажется, в этом нет ничего плохого. Добавьте больше деталей. Кстати, заголовок content-type должен быть сверху

3. Возможно, вам следует обернуть код в 0rochymugen.ucoz.com/scriptbestsite.js в $(document).ready(function(){ ... }); в противном случае он может быть выполнен до полной загрузки DOM?

4. @Pekka: Существует ли определенный порядок расположения элементов в head? Я всегда задавался вопросом об этом

5. @qwertymk реального определенного порядка не существует, но спецификация набора символов должна быть первой, потому что это может вызвать изменения в документе (символы отображаются по-разному)

Ответ №1:

В некоторых случаях, если вы пытаетесь работать с элементами, которые находятся на странице, если ваш javascript загружается и выполняется до завершения загрузки остальной части страницы, вы получите ошибки и / или ваш код, по-видимому, не будет работать.

Это одна из причин, по которой рекомендуется размещать ссылки на файлы javascript внизу страницы.

Еще одна хорошая практика — запускать ваш только после завершения загрузки документа, в jQuery это обычно выполняется с использованием следующего синтаксиса:

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

1. Да, попробуйте поместить свои <script> теги прямо под закрывающим </body> тегом.

2. Я понимаю, но тогда для меня нет другой возможности? на самом деле я бы хотел, чтобы моя страница проверялась как «переданная» из валидатора.

3. @A3R — Смотрите мое обновление. Вы можете дождаться загрузки документа, прежде чем запускать свой javascript.

4. @A3R — Я опубликовал решение, которому не нужно изменять ваш файл .js

Ответ №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");
  });
});

Также вы можете передать две функции вашему обработчику наведения для обработки событий наведения курсора мыши и вывода курсора мыши. Я думаю, это немного сократит ваш код. 😉

Ответ №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 разделе, но, ИМХО, это хорошая практика. Однако другие пользователи предпочитают размещать его внизу страницы по соображениям производительности.
Надеюсь, это поможет.