Question

我正在尝试使用jQuery向一个非常简单的PHP脚本发送ajax请求，以便为jQuery循环插件加载图像。我在从json对象获取图像源字符串时遇到问题。我将展示我的代码，然后在下面详细介绍：

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

我的PHP脚本返回一个json_encoded关联数组，该数组在编码后成为普通的json对象。对于我的测试，我有五个我想要加载的图像：image1 - image5。正如您在我的JavaScript中看到的，我尝试动态创建一个新的索引/属性名称，以通过将'i'的值附加到字符串'image'来访问这些单独的图像源字符串。一切都很直接。

我的问题是，当我以这种方式创建我的属性名称时，它会返回'undefined'。当我手动尝试时，通过编写像images.image3这样的东西，它会返回正确的源字符串。

我已经提醒了我的动态索引（正如你所看到的），它们看起来很好。我认为这不是一个闭包问题，因为它会在这种情况下返回最后一个图像字符串。我在这一点上很难过，所以任何建议都会非常感激。

Answer 1

您的JSON是否有可能包含五个元素的零索引数组，因此当您的单索引循环到达最后一次迭代时，image5是未定义的？

Answer 2

我明白了。使用数组符号而不是点符号就可以了。我认为脚本试图将属性名称视为数字而不是字符串，因此数组符号表示正确。从那里开始，只需要挤压其他一些小虫子就可以了。

解决方案：

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

动态创建json索引不允许我访问其中的数据

2 个答案: