Question

我一直在创建一种简单的个人网页，我开始使用一个在div中显示3x3图像拼贴的页面，我想要拼贴所在的div用于动画和扩展它。宽度，以便我可以在单击图像时为右侧的每个图像添加说明。

无论如何，我已经制作了一个脚本，我相信它应该正常工作。但是，当我在浏览器中加载页面并单击图像时，div不会展开。

也许问题是我没有正确链接脚本文件或jQuery库？无论如何，这里是HTML和jQuery代码，所以任何人都可以告诉我我做错了什么？

HTML：

<!doctype html>
<html>
<head>
    <title>Music</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div class="panel">
        <div class="mosaic">
            <a href="#"><img class="item" src="images/music/thumbs/wsws.jpg"></a>
            <img class="item" src="images/music/thumbs/kida.jpg">
            <img class="item" src="images/music/thumbs/spirit.jpg">
            <img class="item" src="images/music/thumbs/texas.jpg">
            <img class="item" src="images/music/thumbs/floating.jpg">
            <img class="item" src="images/music/thumbs/ashes.jpg">
            <img class="item" src="images/music/thumbs/dataplex.jpg">
            <img class="item" src="images/music/thumbs/twinfantasy.jpg">
            <img class="item" src="images/music/thumbs/usa.png">
        </div>
    </div>
</body>

jQuery（script.js）：

var main = function(){
    $(".item").click(function(){
        $(".panel").animate({
            width:"900px";
        },600);
    });
};

$(document).ready(main);

Answer 1

当您在本地运行jQuery脚本并引用像Google这样的CDN时，您需要更改URL以包含协议。所以改变：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

否则浏览器会尝试从本地文件系统加载文件，通常使用文件协议file://

Answer 2

我在本地运行它。

您需要从本地网络服务器运行它。

您的jQuery URL以//开头，因此它与当前的URL方案相关。

如果通过HTTP加载HTML文档，则将通过HTTP加载jQuery。如果它是通过HTTPS加载的，那么jQuery将通过HTTPS加载。如果它作为本地文件加载，则jQuery将丢失。

你可以使用显式的URL方案，但是从服务器加载的页面和从本地文件加载的页面之间还有很多其他方面的工作方式不同，所以你不妨使用本地文件开发服务器现在设置。

Answer 3

在;末尾的"900px"应删除。另外，将函数直接放在$(document).ready()

中更常规

＆＃13;

$(document).ready(function() {
    $(".item").click(function(){
        $(".panel").animate({
            width:"900px"
        },600);
    });
});

＆＃13;

.panel {
    background-color:lightgray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
    <div class="mosaic">
        <a href="#"><img class="item" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/glossy-black-icons-symbols-shapes/018721-glossy-black-icon-symbols-shapes-smiley-face1.png"/></a>
        <img class="item" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/glossy-black-icons-symbols-shapes/018721-glossy-black-icon-symbols-shapes-smiley-face1.png"/>
        <img class="item" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/glossy-black-icons-symbols-shapes/018721-glossy-black-icon-symbols-shapes-smiley-face1.png"/>
        <img class="item" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/glossy-black-icons-symbols-shapes/018721-glossy-black-icon-symbols-shapes-smiley-face1.png"/>
        <img class="item" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/glossy-black-icons-symbols-shapes/018721-glossy-black-icon-symbols-shapes-smiley-face1.png"/>
    </div>
</div>

＆＃13;

jQuery不会加载我的html文件或只是不起作用

3 个答案: