javascript - 邮件DIV问题

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

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

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;
}

最佳答案

我认为您遇到了问题，因为您有多个具有相同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。