Javascript 当ajax响应成功时，清除jquery成功/错误消息span class

当ajax返回成功响应时，这很好

<span class="message success visible">
    <div id="portrait">
        <img src="/zp/pngFiles/9158976683328087458.png">
    </div>
</span>

---

}

在发送ajax请求之前，请将css类重置回其默认状态。那么正确添加成功和失败类应该没有问题

Html:

---

在成功和错误处理程序中选择span元素，并添加/删除类–问题在哪里？顺便说一句，您的成功响应不是“很好”——span中的div是无效的HTML。正如您所看到的，span类混乱不堪，无法刷新。我怎么能从这里看到它？@user2181397:添加了css代码，我的意思是说failure类与success属性合并，导致了不希望出现的行为。@CBroe:我尝试了$'signup-form'。removeClass'message success failure visible'；这似乎不管用。我不太清楚语法

<span class="message success failure visible">
    <div id="portrait">
        <img src="/zp/pngFiles/2242799749221179588.png">
    </div>
</span>

if (form.valid()) {

    var data = 'dmc=' + encodeURIComponent(dmc.value) + '&printerurl=' + encodeURIComponent(printerurl.value);
    $.ajax({
        url: "preview",
        data: data,
        type: "POST",
        beforeSend: function() {
            $('#preview').attr("disabled", true); // disable button 
        },
        success: function(response) {
            //form.trigger("reset"); DONT WANT TO CLEAR FORM
            var previewList = "<div id=\"portrait\">";
            $.each(response, function(index, value) {
                previewList += "<img src =\"/zpa/pngFiles/" + value + "\">";
            });
            $message._show('success', previewList + "<\div>");
            $('#preview').attr("disabled", false); // enable button
            $('#loading').hide();
        },
        error: function(xhr, status, error, exception, message) {
            $('#loading').hide();
            var errorMessage = "error : " + xhr.responseJSON.error + "<br>" +
                "status : " + xhr.responseJSON.status + "<br>" +
                "message : " + xhr.responseJSON.message + "<br>" +
                "exception : " + xhr.responseJSON.exception;

            $message._show('failure', errorMessage);
            $('#preview').attr("disabled", false); // enable button
        }
    });

}

form .message {
            text-decoration: none;
            -moz-transition: opacity 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
            -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
            -ms-transition: opacity 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
            -moz-transform: scale(1.05);
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            height: 2.75em;
            line-height: 2.75em;
            opacity: 0;
        }

            form .message:before {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                text-transform: none !important;
            }

            form .message:before {
                margin-right: 0.5em;
            }

            form .message.visible {
                -moz-transform: scale(1);
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }

            form .message.success {
                color: #1cb495;
            }

                form .message.success:before {
                    content: '\f00c';
                }

            form .message.failure {
                color: #ff2361;
            }

                form .message.failure:before {
                    content: '\f119';

<div id="feedback" class="message visible">
     <div id="portrait">
         <img src="/zp/pngFiles/9158976683328087458.png">
     <div>
</div>

if (form.valid()) {
    $('#feedback').attr('class', 'message visible');
    var data = 'dmc=' + encodeURIComponent(dmc.value) + '&printerurl=' + encodeURIComponent(printerurl.value);
    ///... Code ommited for brevity
}