1

这就是我到目前为止所拥有的。我正在尝试解析 json 文件并获取 img 路径和宽度，获取 GETJson json 中每条记录的返回值，并附加到“Gallery”中一个名为 thumbs 的类的无序列表中。因此，不是在 html 中有几行代码“li img src=图像路径”width=“，我可以只读取 json 文件并填充它。

我的 json 看起来像这样：

[ {“图像”：“滑块/img/img1.jpg”，“宽度”：400 }，{“图像”：“滑块/img/img2.jpg”，“宽度”：400 }，]

这是 Getjson 逻辑。

<script type="text/javascript">
$().ready(function(){
    $.getJSON('fred.json', function(data) {
         //Collection of li elements
         var items = [];

          $.each(data, function(key, val) {
            items.append('<li><img src="' + val.image + '+ '" width="' 
                               + val.width + '" /></li>');
            });

          $('<ul/>', {
            'class': 'thumbs',
            html: items.join('')
          }).appendTo('#Gallery');

          //Once all ul are created call the gallery function
          $('#Gallery').flickrGallery();
    });
});
</script>

感谢您的任何帮助

我在 json 文件描述中错误地键入了 img 名称。我把它拼写正确了。当我运行 html 时，会发生两件事。图像根本不显示。其他所有内容都会出现背景等，因为图像确实出现了。当我发出警报（项目）时，我可以看到 li 填充。基本上，我在名为 thumbs_1 的 div 中有一个 div id=Gallery 和 ul ，其中 class =thumbs

div id = GALLERY
ul id="thumbs_1" class="thumbs"
li> "img src="images/image_11.jpg" width=600" 这样一共有11行。我不想在 HTML 中对此进行硬编码，我只想使用 GetJson 动态放置同一行代码。然后，一旦填充了 DIV，就
使用这个
$().ready(function(){ $('#Gallery').flickrGallery({
它调用已经开发的特定函数并用于创建照片库。对不起困惑，感谢您已经提供了帮助。

4

4 回答 4

1

如果没有 api 密钥，我无法让 flickrGallery 工作，但我创建了两个示例供您使用 GalleryView 浏览。一种使用 jQuery 模板，一种没有。

带有 JSON 的图库演示

在你的每个循环中试试这个（或看看）

$.each(result, function() {
   $("#thumbs_1").append(
       $("<li>").append(
          $("<img>").attr("src", this.image).attr("width", this.width).addClass("thumbs")
       )
   );
});
于 2011-04-01T19:10:28.877 回答
1

您的 json 在最后一个“}”之后作为额外的昏迷，我实际上不确定您是否可以在数组中“.append”。你可以尝试类似的东西

var items = '<ul>';

          $.each(data, function(key, val) {
            items += '<li><img src="' + val.image + '+ '" width="' 
                               + val.width + '" /></li>';
            });
          items += '</ul>';

然后像这样在#gallery中附加'items'变量

$('#gallery').append(items);

但我不太确定你想要做什么。我假设您使用“alert()”测试了代码的每一部分，看看它是否运行良好。

于 2011-04-01T18:10:49.597 回答
0

您的 .each 中有一个额外的连接，并且应该使用 items.push 而不是 items.append （并且在 JSON 末尾有额外的逗号）...以下作品（您断言画廊创建有效）

<script type="text/javascript">
$().ready(function(){
    $.getJSON('fred.json', function(data) {
         //Collection of li elements
         var items = [];

          $.each(data, function(key, val) {
            items.push('<li><img src="' + val.image + '" width="' 
                               + val.width + '" /></li>');
            });

          $('<ul/>', {
            'class': 'thumbs',
            'id':'thumbs_1',
            html: items.join('')
          }).appendTo('#Gallery');

          //Once all ul are created call the gallery function
          $('#Gallery').flickrGallery();
    });
});
</script>
于 2011-04-01T18:37:03.613 回答
0 
<script type="text/javascript">

$.getJSON('test.json',function(data)
{
    alert(JSON.stringify(data));
    $.each(data, function(i,value)
        {
    //  alert(value.NewsCategory.id + ":" + value.NewsCategory.name + " " + value.NewsCategory.organization_id + " " + value.NewsCategory.last_updated);

            var a = value.NewsCategory;
            var news = value.News;
                $.each(news, function(j,details)
                    {
                //  alert(details.id + " " + details.title + " "+ details.date_created + " " + details.body + " " +details.thumb);
                        content+= '<p>'+ "ID : "+ news[j].id + " Date Created : " + news[j].date_created + " Title : " + news[j].title +'</p>';
                        content+= '<a href = #>' + '<img src="' + news[j].thumb + '"/>' + '</a>';
                        content+= '<br/>';
                     });

                $(content).appendTo("#posts");
         });
 });

/* ]]> */ 

<body>
    <div class="container">
            <div class="span-24">
                    <div id="posts">
                    </div>
            </div>
    </div>

于 2013-07-27T09:17:31.597 回答