循环给img的src赋予相应的值

236 阅读1分钟

说明:我是用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属性;它的显示效果如下:

后来我觉得,有可能是异步的原因,所以就关闭了异步;然后结果就显示的和我预想的结果一样;如下: