Dynamically creating a json index won't let me access the data within
I'm trying to use jQuery to send an ajax request to a very simple PHP script to load images for the jQuery cycle plugin. I'm having an issue with obtaining the image source strings from my json object. I'll show my code, then go into more detail below:
<!doctype html>
<html lang="en-us">
<head>
<title>jQuery Cycle test</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<style>
#slideshow a { margin: 0; padding: 0; color: #fff; }
</style>
</head>
<body>
<div id="slideshow">
</div>
</body>
<script type="text/javascript">
$.get('slideshow.php', {start : "true"}, function(data){
var images = JSON.parse(data);
for(var i = 1; i < 6; ++i){
var index = 'image' + i; alert(index); alert(images.index);
$('#slideshow').innerHTML += '<a href="images/' + images.index + '"><img src="images/' + images.index + '" alt="" /></a>';
}
});
$('#slideshow').cycle({
fx: 'cover',
direction: 'right',
timeout: 3000,
speed: 300
});
</script>
</html>
My PHP script returns a json_encoded associative array, which becomes a normal json object after the encoding. For my test, I have five images I'm trying to load: image1 - image5. As you can see in my JavaScript, I attempt to dynamically create a new index/property name to access these individual image source strings by appending the value of 'i' to the string 'image'. All straight forward.
My problem is that when I create my property names in this way, it returns 'undefined'. When I try it manually, by writing something like images.image3, it returns the proper source string.
I've alerted out my dynamic indexes (as you can see), and they look well-formed to me. I don't think it's a closure issu开发者_如何学Pythone, as it would be returning the last image string in that case. I'm pretty stumped at this point, so any suggestions would be greatly appreciated.
Is it possible your JSON has a zero-indexed array of five elements, and that image5 is therefore undefined when your one-indexed loop reaches that last iteration?
I figured it out. Using array notation rather than dot notation did the trick. I think that the script was trying to treat the property name as a number rather than a string, so array notation put it right. From there, it was a simple matter of squashing a couple other, small bugs.
The solution:
<!doctype html>
<html lang="en-us">
<head>
<title>jQuery Cycle test</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<style>
#slideshow a { margin: 0; padding: 0; color: #fff; }
</style>
</head>
<body>
<div id="slideshow">
</div>
</body>
<script type="text/javascript">
$.get('slideshow.php', {start : "true"}, function(data){
var images = JSON.parse(data);
for(var i = 0; i < 5; ++i){
$('#slideshow').append('<a href="images/' + images['image' + i] + '"><img src="images/' + images['image' + i] + '" alt="" /></a>');
}
$('#slideshow').cycle({
fx: 'cover',
direction: 'right',
timeout: 3000,
speed: 300
});
});
</script>
</html>
加载中,请稍侯......
精彩评论