Question

JSON

 {
      "items": 
      [
        {
          "name": "Project title",
          "id": 16,
          "image": "\u002fimages\u002fdefault.png",
        },
        {
          "name": "Project title",
          "id": 25,
          "image": "\xxx",

        },
 ]
}

JS

var wall = new freewall("#freewall");

      $('.add-more').click(function(){

          $.ajax({
          url: getDataUrl,
          type: 'GET',
          dataType: 'json',
          success: function( response ){

         for (var i = 0; i < 20; ++i) {
           $.each(response.items, function(index, value) {

           var tmp= '<div class="grid-container">';
            tmp+= '<div class="grid--tile">';
            tmp+= '<a class="overlay" href="portfolio/' + value.id +'"></a>"';
            tmp+= '<img src="'+value.image+'" width="100%" /></div>';
            tmp+= '<p class="title">'+value.name+'</p></div>';

          }
            wall.appendBlock( tmp );
            wall.refresh();
          }
           wall.fitWidth();
         },
          error: function(error) {
            console.log( error)
          }
        });
    });

使用freewall添加更多带有标题和ID的图片。控制台上的错误显示为Uncaught syntaxError: Unexpected identifier。我检查了几次代码，但我没有看到任何错误？
如果点击按钮，如何使用json从＃20开始追加？模板仅使用url?max=10显示10。然后它应该从#11开始检查，并在click按钮上显示20张图像（11到31）。

帮助或指导赞赏！

Answer 1

有几个错误，您可以按如下方式优化代码

var wall = new freewall("#freewall");

var img=0;

$('.add-more').click(function() {

    $.ajax({
        url: getDataUrl,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            $.each(response.items, function(index, value) {
                if (img<=index&&index<(img+20)) {
                    var tmp = '<div class="grid-container">';
                    tmp += '<div class="grid--tile">';
                    tmp += '<a class="overlay" href="portfolio/' + value.id + '"></a>"';
                    tmp += '<img src="' + value.image + '" width="100%" /></div>';
                    tmp += '<p class="title">' + value.name + '</p></div>'; 
                    wall.appendBlock(tmp);
                    wall.refresh();
                    i++;
                }
            });
            img+=20;
            wall.fitWidth();
        },
        error: function(error) {
            console.log(error)
        }
    });
});

Answer 2

I think you didn't properly close the **each statement**please go through the below code.

var wall = new freewall("#freewall");

      $('.add-more').click(function(){

          $.ajax({
          url: getDataUrl,
          type: 'GET',
          dataType: 'json',
          success: function( response ){

         for (var i = 0; i < 20; ++i) {
           $.each(response.items, function(index, value) {

           var tmp= '<div class="grid-container">';
            tmp+= '<div class="grid--tile">';
            tmp+= '<a class="overlay" href="portfolio/' + value.id +'"></a>"';
            tmp+= '<img src="'+value.image+'" width="100%" /></div>';
            tmp+= '<p class="title">'+value.name+'</p></div>';

          });
            wall.appendBlock( tmp );
            wall.refresh();
          }
           wall.fitWidth();
         },
          error: function(error) {
            console.log( error)
          }
        });
    });

Freewall使用json显示标题，图像ID

2 个答案: