Question

我试图将一组html代码附加到div但却无法工作。我已经尝试过在stackoverflow中发布的其他解决方案，但仍然无法工作。

var placeholder = $('<div class="view view-first img" style="cursor: pointer; display: inline-block;" title="Upload Car Image">' +
                            '<input type="hidden" value="" class="photodata photoguid" />' +
                            '<input type="hidden" value="" class="photoid" />' +
                            '<img src="" style="height: 200px; width: 250px;" class="thumbnailPreview" />' +
                            '<div class="mask">' +
                                '<button type="button" class="info btn btn-primary profilepic" style="display: none;" title="Active display photo"><span class="glyphicon glyphicon-bookmark"></span></button>' +
                                '<button type="button" class="info btn btn-danger deletephoto" style="margin-left: 5px; display: none;" title="Delete Photo"><span class="glyphicon glyphicon-trash"></span></button>' +
                            '</div>' +
                        '</div>');

$.ajax({
            url: $("#saveImageGuid").val(),
            type: "post",
            data: '{ recordID: "' + $(".recordID").val() + '", photoguid: "' + fileGroupInfo.uuid + '"}',
            datatype: "json",
            contentType: 'application/json',
            beforeSend: function () {
                $(".uploadcontainer").find("#alertmessage").remove();
            },
            error: function (data) {
                alertmessage.attr("class", "alert alert-danger alert-dismissible");
                alertmessage.find("#message").text(data.status);
                $(".uploadcontainer").append(alertmessage);
            },
            success: function (data) {
                if (data.statusCode == 500)
                {
                    alertmessage.attr("class", "alert alert-danger alert-dismissible");
                }
                else
                {
                    alertmessage.attr("class", "alert alert-success alert-dismissible");

                    var guids = jQuery.parseJSON(data.guids);
                    var thumbnails;

                    $.each($(guids), function (key, value) {
                        var uploadcaregeturl = "@Config.UploadCareGETUrl";
                        uploadcaregeturl = uploadcaregeturl.replace("{0}", value);

                        placeholder.find(".thumbnailPreview").attr("src", uploadcaregeturl);

                        $(".thumbnailcontainer").append(placeholder);
                    });
                }
            }
        });

我从控制器获取列表然后将其放在img src属性中，然后将其附加到div。在ajax的成功部分中执行循环之后，它不会附加每个占位符，而是替换先前循环中附加的内容。我出错的任何想法。

Answer 1

现在就开始工作了。我将占位符放在成功部分内，并在控制器中重构我的代码，以便更好地处理状态代码。

$.ajax({
        url: $("#saveImageGuid").val(),
        type: "post",
        data: '{ recordID: "' + $(".recordID").val() + '", photoguid: "' + fileGroupInfo.uuid + '"}',
        datatype: "json",
        contentType: 'application/json',
        beforeSend: function () {
            $(".uploadcontainer").find("#alertmessage").remove();
        },
        error: function (data) {
            alertmessage.attr("class", "alert alert-danger alert-dismissible");
            alertmessage.find("#message").text(data.status);
            $(".uploadcontainer").append(alertmessage);
        },
        success: function (data) {
            alertmessage.attr("class", "alert alert-success alert-dismissible");

            var guids = jQuery.parseJSON(data.guids);
            var thumbnails;

            $.each($(guids), function (key, value) {
                var placeholder = $('<div class="view view-first img...');

                var uploadcaregeturl = "@Config.UploadCareGETUrl";
                uploadcaregeturl = uploadcaregeturl.replace("{0}", value);

                placeholder.find(".thumbnailPreview").attr("src", uploadcaregeturl);

                $(".thumbnailcontainer").append(placeholder);
            });
         }
    });

jquery不附加但替换div的内容

1 个答案: