Question

所以问题出在标题中。如何使用jQuery将一个div内容替换为另一个内容一段时间？我只有一个块，其中包含不可见的用户信息（样式中有display: none;，而信息从服务器检索时我想显示Loading user info...之类的消息。

修改

以下是我从服务器检索信息的方法：

$.post("/getUserAdditionalInfo",
                { "id": pId },
                function (data) {
                    window.user = $.extend(
                    {
                        "pid": pId,
                        "secondname": data.sname,
                        "firstname": data.fname,
                        "middlename": data.mname
                    }, existingParams);
                    updateUserInformationLabels();
                },
                "json"
        );

EDIT2

以下是我对用户信息的代码：

<div id="UserAdditionalInfo">
<ul class="info">
    <li><b>First name:</b><span id="ExInfoWorkFirstName"></span></li>
    <li><b>Second name:</b><span id="ExInfoWorkSecondName"></span></li>
    <li><b>Middle name:</b><span id="ExInfoWorkMiddleName"></span></li>
</ul>
</div>

我只是想用id = UserAdditionalInfo用'loading user info'字符串临时替换div。然后完全检索数据我需要恢复初始内容（沿着用数据替换占位符）。

Answer 1

你可以......

$('div:first').html('Loading user info...').load('something.php');

Answer 2

将原始html存储在像这样的变量

中

var originalHTMl = $('#UserAdditionalInfo').html();

然后用这样的loading info替换这个div的内容..

$('#UserAdditionalInfo').html('Loading user info...').show();

$.post("/getUserAdditionalInfo",
                { "id": pId },
                function (data) {
                    window.user = $.extend(
                    {
                        "pid": pId,
                        "secondname": data.sname,
                        "firstname": data.fname,
                        "middlename": data.mname
                    }, existingParams);
                    updateUserInformationLabels(originalHTMl);//pass the original html to this function
                    var updatedHTML = $('#UserAdditionalInfo').html();// get the updated HTMl
                    $('#UserAdditionalInfo').html(updatedHTML).show();//Show the div..now this div has all updated htnl
                },
                "json"
        );


function updateUserInformationLabels(originalHTMl){
                if (typeof window.patient != 'undefined') {
                var ExInfoWork = $(originalHTMl).find('#ExInfoWork');
                 ExInfoWork.html(window.patient.work);
                }
         // more replacement logic as you said
} 
// don't return anything
}

Answer 3

如果你使用的是jQuery.ajax（），那就是这样的：

$.ajax({
   beforeSend: function() {
       // Replace with "loading..."
   },
   complete: function() {
       // Replace with result
   },
});

如何临时替换div内容与另一个

3 个答案: