javascript - jQuery .hide() 和 .show() 不起作用

Question

我使用 php 代码动态生成此代码:-

<div class="mailList" id="M_6">
    <div class="mailListHeader" id="H_6">
        <img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif">
        Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br>
        Subject: <strong>Test Mail</strong><br>
    </div>

    <div class="mailListContent" id="C_6">
        <div class="closeContent" id="CC_6">Close [x]</div>
        <span id="SPAN_6"></span>
    </div>

    <div class="mailListFooter" id="F_6">
        <span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;">
            View Content
        </span>
        <span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;">
            Successfull-[0] Failed-[4]
        </span>
    </div>
</div>

然后，用户可以点击查看内容或成功-[0]失败-[4]，这将发出一个ajax请求，然后在div mailListContent中显示结果。下面是 jquery ajax 请求的代码:-

$(".mailContentBtn, .mailListBtn").click(function(){
    var currentId = $(this).attr('id');
    currentId = currentId.split("_");
    var actualId = currentId[1];

    if($("#C_"+actualId).is(":visible")) {
        $("#C_"+actualId).hide("slow","swing");
    }
    $("img#LOADER_"+actualId).show();

    if(currentId[0]=="MCBTN") {
        var dataString ="action=getMailContentByID&mailID="+actualId;  
    } else {
        var dataString ="action=getMailListByID&mailID="+actualId;
    }

    $.ajax({
        type: "POST",
        url: "include/getMail.php",
        data: dataString,
        cache: false,
        async: false,
        success: function(html) { 
            $("#SPAN_"+actualId).empty();
            $("#SPAN_"+actualId).append(html);

            $("#C_"+actualId).show("slow","swing");
            $("img#LOADER_"+actualId).hide();
        } 
    });
});

请求和事件工作正常，问题是每次用户单击查看内容或成功-[0]失败-[4]时加载图像不显示。正如您所看到的，我为每个加载图像提供了一个唯一的 ID，而 clik 上只会显示 1 个加载图像。在 Google Chrome 中检查代码没有错误。我该如何解决这个问题？

谢谢。

Answer 1

在调用 $.ajax 时，将“async”选项更改为“true”。因为在您的情况下， $.ajax 会阻止 ui 线程显示加载图像，因为它是同步执行的。