Question

为什么在没有调整任何脚本的情况下，此网站会出现“未捕获的类型错误：无法读取 null 的属性‘animate’”？

2017-06-01

5430

javascript jquery-animate

我还没有更新过这个辅助站点的脚本，只有数据库产品信息。我是一名平面和网页设计师，对 html 和 css 比较了解，但对 javascript 了解不多。

网页： http://westcoastnaturals.com/productsdesp.php

错误导致显示产品信息的 javascript 部分无法呈现。

Error:
Uncaught TypeError: Cannot read property 'animate' of null
productsdesp.php:85
    at slideShow (productsdesp.php:85)
    at HTMLDocument.<anonymous> (productsdesp.php:68)
    at Function.<anonymous> (jquery-1.3.1.min.js:19)
    at Function.each (jquery-1.3.1.min.js:12)
    at Function.ready (jquery-1.3.1.min.js:19)
    at HTMLDocument.<anonymous> (jquery-1.3.1.min.js:19)

这是它指向 php:85 的编码：

$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400);

这是完整部分。

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        //Execute the slideShow
        slideShow();
    });
    function slideShow() {

        //Set the opacity of all images to 0
        $('#gallery a').css({ opacity: 0.0 });

        //Get the first image and display it (set it to full opacity)
        $('#gallery a:first').css({opacity: 1.0});

        //Set the caption background to semi-transparent
        $('#gallery .caption').css({opacity: 0.7});

        //Resize the width of the caption according to the image width
        $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });

        //Get the caption of the first image from REL attribute and display it
        $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400);

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery()', 5000);
    }

该编码中是否有导致错误的因素？我是否应该在其他地方查找问题？我对 javascript 确实不太熟悉，而且我的网络搜索也没有什么进展。

提前感谢您的帮助！

Answer 1

页面上似乎缺少画廊元素，因此脚本无法通过其 ID 和类选择元素： #gallery .content

如果页面上有一个元素（可能是数据库中的条目），那么画廊会出现在页面上吗？

Answer 2

您没有与 $('#gallery .content') 匹配的 HTML 元素。

请确保 HTML 元素类似以下内容：

<div id="gallery ">
  <div class="content">
    ...
  </div>
</div>

如果 js 代码是包含在各处的通用 js，您可以像下面这样更改 slideShow() 函数，以确保该函数不会出错：

function slideShow() {
        // check if gallery element is in the page first...
        if ($('#gallery .content').length < 1) return;

        //Set the opacity of all images to 0
        $('#gallery a').css({ opacity: 0.0 });

        //Get the first image and display it (set it to full opacity)
        $('#gallery a:first').css({opacity: 1.0});

        //Set the caption background to semi-transparent
        $('#gallery .caption').css({opacity: 0.7});

        //Resize the width of the caption according to the image width
        $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });

        //Get the caption of the first image from REL attribute and display it
        $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400);

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery()', 5000);
    }