说明:我是用ajax从数据库中拿到数据,然后循环创建下面的html;目的是想要给每一个img赋予对应的src,而这个src都是动态从数据库中拿到的
$.ajax({
url: "/TopicController/getCommentByTopic",
success: function (data) {
for (var i in data) {
html = " <div class=\"layui-row layui-col-space1\">\n" +
" <div class=\"layui-col-md1\" style=\"width: 60px;\">\n" +
" <div class=\"layui-row\" id='imgContainer'>" +
"<img id='+"+i+"+' style='width: 30px;height: 30px;' >" +
"</div>\n" +
" </div>\n" +
" <div class=\"layui-col-md1\">\n" +
"<h3></h3>" +
" <div style='width: 900px' class=\"layui-row\" id=\"topic\">" + data[i].replyContent + "</div>\n" +
" <div style=\"width: 900px\">\n" +
"<p id='id' style='display: none'>" + data[i].id + "</p>" +
" <p id=\"commentCount\" style=\"display: inline;\">" + data[i].commentCount + "条评论" + "</p>\n" +
" <p id=\"likeCount\" style=\"display:inline\">" + "喜欢" + "</p>\n" +
" <p id=\"showReply\" style=\"display:inline\">" + "查看回复" + "</p>\n" +
" <p id=\"reply\" style=\"display:inline\">" + "回复" + "</p>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
$("#content").append(html);
$.ajax({
url: "/TopicController/dialogue",
data: {"id": data[i].id},
success: function (data) {
$("h3").text(data);
}
});
//这是最终结果
$.ajax({
url: "/PersoninfoController/CommentPersonImg",
async:false,
data: {"id": data[i].id},
success: function (data) {
alert($("img[id='+"+i+"+']").attr("id"));
$("img[id='+"+i+"+']").attr("src",data);
}
})
}
我一开始是用异步的,也就是没有设置ajax的async属性;它的显示效果如下:

