0

我正在使用 facebook Api 获取一些专辑名称及其封面照片。根据这些名称和照片，我正在尝试创建一个 jquery Mobile 页面，将它们显示在列表中。

我的一些 javascript 代码如下所示：

// Additional initialization code such as adding Event Listeners goes here
            FB.api('593959083958735/albums', function(response) {
                if(!response || response.error) {
                    // render error
                    alert("Noo!!");
                } else {
                    // render photos
                    for(i=0; i<response.data.length; i++){
                        albumName[i] = response.data[i].name;
                        albumCover[i] = response.data[i].cover_photo;
                        albumId[i] = response.data[i].id;

                        FB.api( albumCover[i], function(response) {
                            if(!response || response.error) {
                                // render error
                                alert("Noo!!");
                            } else {
                               // render photos
                               document.getElementById('coverPhoto').src = response.picture;
                            }
                        });


                        $("ul").append('<li>'+
                        '<a href="testFile.HTML" data-transition="slidedown">'+
                          '<img src= "nothing.jpg" id = "coverPhoto" />'+
                          '<h2>' + albumName[i] + '</h2>'+
                          '<p> Test Paragraph</p>'+
                        '</a>'+
                         '</li>')
                     .listview('refresh');

                    }
                }
            });

数组AlbumName[]有专辑的名字，还有每张专辑repsonse.picture的封面图片。

正如您所见，我使用从通话中获得的名称和图片动态创建了一个 listView。然而，这就是结果。相册的名字都还可以，但是照片乱七八糟。在“网络”选项卡上，我看到我从相册中获取了所有封面照片。但似乎我只在 listView 的第一个单元格中覆盖了封面照片。为什么呢？

4

4 回答 4

1

据说 id 必须是唯一的，您应该为每个元素指定一个类，使用 jQuery 它必须如下所示：

$( ".coverPhoto" ).each(function( index ) {
       this.src = response.picture;
   );
});

coverPhoto 是你的班级。

于 2013-06-19T15:27:01.237 回答
0

您为每个人提供相同的 ID <img>：

<img src= "nothing.jpg" id = "coverPhoto" />

ID 必须是唯一的

于 2013-06-19T15:22:11.317 回答
0

正如 Dark Falcon 所说，ID 必须是唯一的。

尝试以下方式：

...
'<img src="nothing.jpg" id="coverPhoto'+i+'" />'+
...

在您的加载代码中：

(function(i) {
    FB.api( albumCover[i], function(response) {
        if(!response || response.error) {
            // render error
            alert("Noo!!");
        } else {
            // render photos
            document.getElementById('coverPhoto'+i).src = response.picture;
        }
    });
})(i);
于 2013-06-19T15:23:06.777 回答
0

问题在于您渲染照片的方式。您正在按 ID 选择元素，但所有元素都具有相同的 ID。每个元素都应该有一个唯一的 ID，否则您的选择器将不起作用。

您应该将照片渲染到模板中，而不是渲染模板然后替换图像的 src。也许是这样的：

// Additional initialization code such as adding Event Listeners goes here

var albums; // a place to get album info outside this function

FB.api('593959083958735/albums', function(response) {
  if(!response || response.error) {
    // render error
    alert("Noo!!");
  } else {
    // render photos
    for(i=0; i<response.data.length; i++){
      albums[albumID] = response.data[i] // for accessing the album info eslewhere

      var albumName = response.data[i].name;
      var albumCover = response.data[i].cover_photo;
      var albumID = response.data[i].id;

      FB.api( albumCover, function(response) {
        if(!response || response.error) {
          // render error
          alert("Noo!!");
        } else {
          // render photos
          $("ul").append('<li>'+
            '<a href="testFile.HTML" data-transition="slidedown">'+
            '<img src="'+response.picture+'" id="coverPhoto-'+albumID+'" />'+
            '<h2>'+albumName+'</h2>'+
            '<p>Test Paragraph</p>'+
            '</a>'+
            '</li>')
          .listview('refresh');
        }
      });
    }
  }
});
于 2013-06-19T15:25:00.007 回答