Question

我有一个来自网站的JavaScript代码：http://www.micahcarrick.com/change-image-with-jquery.html我只修改了图像的名称，以便使用我拥有的.png文件。问题是，如果我在本地的Web浏览器中打开它，那么当我点击一个名为django.gif的缩略图时，我将被引导到实际图像而不是新图像替换另一个。但是，如果我将这个.html脚本放在Godaddy.com网站上并使用相同的Web浏览器转到它，它就像原始网站一样正常工作：http://www.micahcarrick.com/code/jquery-image-swap/index.html。我注意到在网站上我从作者那里得到了这些代码，并提到了＃34;缩略图是指向图像的完整版本的链接。如果用户没有JavaScript，则链接仍会转到大图像。＆＃34;这是否意味着我没有Java Script？我可以在本地运行其他简单的JavaScript代码。为什么当我把它放在网站上时这会起作用，但是在本地测试时不起作用，即使使用完全相同的Web浏览器也是如此？这是代码：

<!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>

谢谢你，汤姆

Answer 1

这一行就是导致你的问题的原因：

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

＆＃34; //＆＃34;在URL告诉浏览器使用与页面相同的协议之前，当在本地运行时，协议将是＆＃34; file：＆＃34;浏览器将使用它来查看您的本地驱动器以查找jquery库（它不会找到它，从而打破页面）。为了解决这个问题，请在＆＃34; http：＆＃34;或＆＃34; https：＆＃34;到URL所以它看起来像

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

Answer 2

我看到两个问题。

1。 jQuery的script标记src属性无法找到正确的资源。在本地运行时，此语法（//ajax...）将解析为file:///ajax.googleapis.com/...，这不是jQuery的位置。尝试在其前面添加http://或https://。

2。您正在使用已弃用的jQuery函数。 .live()不在版本1.6.2中 - 您需要使用.on()代替，例如：

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

这应该有效。

希望这有帮助。

Answer 3

更改脚本标记的src以包含http：protocol

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

为什么javascript在我的网站上运行，但不在本地

3 个答案: