почему javascript работает на моем сайте, но не локально

ProgramBox

почему javascript работает на моем сайте, но не локально

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

#javascript #jquery #html #image #src

#javascript #jquery #HTML #изображение #Src

Вопрос:

У меня есть код JavaScript, который я получил с сайта: http://www.micahcarrick.com/change-image-with-jquery.html Я только изменил название изображений, чтобы использовать файлы .png, которые у меня есть. Проблема в том, что если я открываю это в веб-браузере локально, то при нажатии на одну из миниатюр вызывается django.gif Я направляюсь к фактическому изображению, а не к новому изображению, заменяющему другое. Однако, если я помещу этот HTML-скрипт в Godaddy.com веб-сайт и перейдите на него с помощью того же веб-браузера, он работает корректно, как и исходный сайт: http://www.micahcarrick.com/code/jquery-image-swap/index.html . Я заметил, что на сайте, который я получил от этого кода, автор упоминает, что «Эскизы являются ссылками на полноразмерные версии изображений. Если у пользователя нет JavaScript, ссылки по-прежнему ведут на большое изображение. » Означает ли это, что у меня нет Java Script? Я могу запускать другие простые коды JavaScript локально. Почему это работает, когда я размещаю его на сайте, но не работает при локальном тестировании, даже при использовании того же веб-браузера? Вот код:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example: Change Image with jQuery</title>
  <style type="text/css">
    body { width: 600px; margin: auto; }
    #imageWrap { 
        width: 640px; 
        height: 420px; 
        background: url('ajax-loader.gif') center center no-repeat; 
    }
  </style>
  <script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').live("click", function() {
            $('#mainImage').hide();
            $('#imageWrap').css('background-image', "url('ajax-loader.gif')");
            var i = $('<img />').attr('src',this.href).load(function() {
                $('#mainImage').attr('src', i.attr('src'));
                $('#imageWrap').css('background-image', 'none');
                $('#mainImage').fadeIn();
            });
            return false; 
        });
    });
  </script>
</head>
<body>
  <h1>Example: Change Image with jQuery</h1>
  <p>
    Main image is replaced using jQuery when a thumbnail is clicked. See full 
    description at <a 
    href="http://www.micahcarrick.com/change-image-with-jquery.html">Change 
    Image with jQuery</a>
  </p>

  <a href="bidu.png" class="thumbnail"><img src="django.gif" 
    alt="Image 1"/></a>
  <a href="athex.png" class="thumbnail"><img src="django.gif" 
    alt="Thumbnail 2"/></a>

  <div id="imageWrap">
    <img src="bidu.png" alt="Main Image" id="mainImage"/>
  </div>

</body>
</html>

Спасибо,
Том

1. Вам нужен локальный сервер для разрешения jQuery src. Попробуйте http://ajax.googleapis.com...

2. .live() не рекомендуется. Попробуйте использовать .on() вместо этого — синтаксис тот же.

Ответ №1:

Эта строка прямо здесь является причиной ваших проблем:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Символ «//» перед URL-адресом указывает браузеру использовать тот же протокол, что и страница, и при локальном запуске протоколом будет «file:», который браузер будет использовать для поиска на вашем локальном диске библиотеки jquery (которую он не найдет, таким образомразрыв страницы). Чтобы исправить это, добавьте «http:» или «https:» к URL-адресу, чтобы он выглядел так

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ №2:

Я вижу две проблемы.

1. Ваш script src атрибут тега для jQuery не найдет правильный ресурс. При локальном запуске этот синтаксис ( //ajax... ) будет разрешен как file:///ajax.googleapis.com/... , чего нет в jQuery. Попробуйте поставить http:// или https:// перед ним.

2. Вы используете устаревшую функцию jQuery. .live() отсутствует в версии 1.6.2 — вам нужно использовать .on() вместо этого, например:

 $(".thumbnail").on("click",function() { ... });

Это должно сработать.

Надеюсь, это поможет.

Ответ №3:

измените src тега script, чтобы включить http: протокол

  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"