0

我正在尝试使用 jquery mobile 显示一些 json 数据

这个页面有什么问题？

http://jsfiddle.net/MeUHy/

谢谢

4

1 回答 1

0

You had some mistakes in your code.

You should try the fllowing:

<!DOCTYPE html>  
<html>      
    <head>      
        <title>Sample Page</title>           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>        
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript">

        $(document).ready(function() {
            var jResult = [{"status":"ok",
                "count":6,
                "categories":[{
                    "id":19,
                    "slug":"abcd",
                    "title":"abcd",
                    "post_count":1
                },
                {
                    "id":6,
                    "slug":"conferences",
                    "title":"Conf\u00e9rences",
                    "post_count":33
                }] // <--- You had a missing ']'
            }];

            var buttonHtmlString = "", pageHtmlString = "";

            for (i = 0; i < 2; i++) {
                // 'jResult' is an array so you should have 'jResult[0].categories[i].title'
                //    instead of 'jResult.categories[i].title'
                buttonHtmlString += '<a href="#' + jResult[0].categories[i].title + '" data-role="button">' + jResult[0].categories[i].title + '</a>';
                pageHtmlString += '<div data-role="page" id="' + jResult[0].categories[i].title + '">';
                pageHtmlString += '<div data-role="header"><h1>' + jResult[0].categories[i].title + '</h1></div>';
                pageHtmlString += '<div data-role="content"><p>' + jResult[0].categories[i].post_count + '</p></div>';
                pageHtmlString += '</div>';
            }

            $("#buttonGroup").append(buttonHtmlString);
            $("#buttonGroup a").button();
            $("#buttonGroup").controlgroup();

            $("#main").after(pageHtmlString);

            //return false;
        });

        </script>
    </head>      
    <body>              
        <div data-role="page" id="main">      
            <div data-role="header">         
                <h1>
                    Page 1
                </h1>     
            </div><!-- /header -->      

            <div data-role="content">
                <p>I fake loaded content in the <i>$(document).ready()</i> event!</p>
                <div data-role="controlgroup" id="buttonGroup"></div>
            </div><!-- /content -->      

        <div data-role="footer">              
            </div>
        </div><!-- /page -->              

    </body>
</html>

Hope this helps.

于 2012-09-15T09:49:28.463 回答