我正在使用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,其中包含我从通话中获得的名称和图片。但是结果是THIS。专辑的名称都可以,但照片搞砸了。在“网络”标签上,我看到我从相册中获取了所有封面照片。但似乎我只在listView的第一个单元格中覆盖封面照片。为什么呢?
答案 0 :(得分:1)
因为有人说id必须是唯一的,你应该为每个元素指定一个类,使用jQuery它必须如下所示:
$( ".coverPhoto" ).each(function( index ) {
this.src = response.picture;
);
});
coverPhoto是你的班级。
答案 1 :(得分:0)
您为每个<img>
提供相同的ID:
<img src= "nothing.jpg" id = "coverPhoto" />
ID必须是唯一的
答案 2 :(得分: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);
答案 3 :(得分: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');
}
});
}
}
});