我正在尝试构建一个基本的 JQuery 应用程序，它从 Flickr 加载图像，将它们添加到 jQuery 对象数组中，按顺序将它们添加到 DOM，在 3 秒的周期内淡入和淡出它们。然而，在我的displayImage函数时，我无法使用 .hide()、.fadeIn() 或 .fadeOut()，因为它会抛出“未捕获的类型错误:无法读取未定义的属性“fadeIn””错误。这是我的代码，包括 JS 和 HTML:
var main = function(){
"use strict";
var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&format=json&jsoncallback=?";
//Creates the empty array of jQuery image objects
var images = [];
$.getJSON(url, function(flickrResponse){
flickrResponse.items.forEach(function (photo){
var $img = $("<img>").hide();
$img.attr("src", photo.media.m);
//Populates the images array with jQuery objects defined from the Flickr JSON request
images.push($img);
// $("main .photos").append($img);
// $img.fadeIn();
});
});
function displayImage(imgIndex) {
var $displayedImg = images[imgIndex];
$(".photos").fadeOut('slow');
$(".photos").empty();
$(".photos").append($displayedImg);
$displayedImg.fadeIn('slow');
//Function which recursively calls 'displayImage' every three seconds
setTimeout(function(){
imgIndex = imgIndex + 1;
displayImage(imgIndex);
}, 3000);
}
displayImage(0);
};
$(document).ready(main);
和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flickr App</title>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
</head>
<body>
<header>
</header>
<main>
<div class = "photos">
</div>
</main>
<footer>
</footer>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
有什么可能未定义的想法吗？请注意 var $img = $("<img>").hide(); $.getJSON 中的行请求不会抛出未定义的错误!
非常感谢!
编辑:
我还尝试发出同步请求来获取 JSON，以确保它在 displayImage 之前加载。函数被调用，但仍然抛出相同的错误:
var main = function(){
"use strict";
var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&format=json&jsoncallback=?";
var images = [];
//THIS IS WHAT HAS CHANGED
$.ajax({url: url,
dataType: 'json',
async: false,
success: function(flickrResponse){
flickrResponse.items.forEach(function (photo){
var $img = $("<img>").hide();
$img.attr("src", photo.media.m);
images.push($img);
});
}});
function displayImage(imgIndex) {
var $displayedImg = images[imgIndex];
$(".photos").fadeOut('slow');
$(".photos").empty();
$(".photos").append($displayedImg);
$displayedImg.fadeIn('slow');
setTimeout(function(){
imgIndex = imgIndex + 1;
displayImage(imgIndex);
}, 3000);
}
displayImage(0);
};
$(document).ready(main);
最佳答案
您需要等待 JSON 返回，然后才能尝试 displayImage(0)。 JSON 请求是异步的，因此您对 displayImage 的调用是在返回任何 JSON 之前发生的。
我建议使用 Javascript 调试器进行单步调试，以更好地了解正在发生的情况。然后您会看到 images 为空，因此 $displayedImg 未定义。
关于JavaScript 抛出 'cannot read property ... of undefined' 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27653481/