1

これは私がこれまでに持っているものです。json ファイルを解析し、img パスと幅を取得して、GETJson json の各レコードの戻り値を取得し、"Gallery" に追加しようとしています。そのため、html に "li img src= 画像のパス" width= " という数行のコードを含める代わりに、json ファイルを読み取ってこれを入力するだけで済みます。

私のjsonは次のようになります：

[ { "image":"sliders/img/img1.jpg", "width":400 }, { "image":"sliders/img/img2.jpg", "width":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 を実行すると、2 つのことが起こります。画像はまったく表示されません。画像の背景など、他のすべてが表示されます。アラート（アイテム）を実行すると、li が表示されます。基本的に、div id=Gallery と、thumbs_1 という名前の div 内にクラス =thumbs を持つ ul があります。

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

あなたのjsonは最後の「}」の後の追加のcomaであり、配列で「.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 に答える
1

API キーがないと flickrGallery を動作させることができませんでしたが、GalleryView を使用して確認できるように 2 つの例を作成しました。1 つは jQuery テンプレートを使用し、もう 1 つは使用していません。

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 に答える
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 に答える
0

.each に追加の連結があり、items.append の代わりに items.push を使用する必要があります (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 に答える