javascript - 消息 DIV 问题

Question

我有以下 javascript，它会在屏幕上弹出一条消息，但如果尚未删除，则它总是位于前一个 messageDiv 的顶部。

我正在尝试弄清楚如何让 messageDiv 将前一个 div 向下推直到它消失然后取代前一个 MessageDiv 的位置，或者显示在页面上向下移动的当前 div 的正下方前一个出现新的。

function pushDev(){
    $.post( "#cgi.SCRIPT_NAME#", {fileId: "#fileIdIn#", action: "migrateFileDev"}, function(data){
        $("body").prepend("<div class='pageMessage' id='messageDiv'>" + data + "</div>");
        setTimeout(function(){$('#messageDiv').remove()}, 6000);
    });
}

function savePage(){
    var code = editor.getValue();
    $.post( "#cgi.SCRIPT_NAME#", {fileIdIn: "#fileIdIn#", filePath: "#path#", action: "savePage", editText: code }, function(data){
        $("body").prepend("<div class='pageMessage' id='messageDiv'>Saved</div>");
        setTimeout(function(){$('#messageDiv').remove()}, 6000);
    });
}


.pageMessage{
    /*position:fixed;*/
    /*top: 15%;*/
    /*right: 8%;*/
    background-color: #f5f5f5;
    opacity: 0.9;
    color: #FFF;
    font-size: 18px;
    text-align:center;
    padding: 8px;
    width: auto;
    height:auto;
    border:solid;
    border-color: #00A3DD;
    border-width: 3px;
    z-index: 1000;
    border-radius: 8px;
}

Answer 1

我认为您遇到了问题，因为您有多个具有相同 ID 的元素，并且当您的 setTimeout 回调执行时，它会删除最新的消息而不是最旧的消息。 HTML 中只允许有一个具有给定 ID 的元素。例如，您需要找出一种不同的方法来查找应针对特定超时删除的 div(我去掉了不相关的 AJAX 代码):

function pushDev(){
    var messageDiv = $("<div class='pageMessage'>Data</div>")
    $("body").prepend(messageDiv);
    setTimeout(function(){messageDiv.remove()}, 6000);
}

function savePage(){
    var messageDiv = $("<div class='pageMessage'>Saved</div>")
    $("body").prepend(messageDiv);
    setTimeout(function(){messageDiv.remove()}, 6000);
}

JSFiddle here .