jQuery中無響應的淡入淡出

Question

我正在使用以下jquery實現Twitter風格的關注/取消關注功能。

$(function() {
    $(".follow").click(function(){
        var element = $(this);
        var I = element.attr("id");
        var info = 'id=' + I;
        $("#loading").html('<img src="loader.gif" >');

        $.ajax({
            type: "POST",
            url: "follow.php",
            data: info,
            success: function(){
                $("#loading").ajaxComplete(function(){}).slideUp();
                $('#follow'+I).fadeOut(200).hide();
                $('#remove'+I).fadeIn(200).show();
            }
        });
        return false;
    });
});

我有一個類似的取消關注功能。 但是我有以下問題：

當我有N項{1,2..iN}每個項的id = followi ，我單擊關注按鈕。 我發現有些項目會做出回應，而另一些則沒有。 我懷疑這是純JavaScript問題...否則，我認為所有按鈕都不會響應。

是時間安排問題嗎？感謝所有幫助。 如果您能指出一個更簡單的方法，我也將不勝感激。

謝謝！

Answer 1

好吧，您正在ajax成功處理程序中進行UI更新，因此更新UI的響應時間取決於Ajax響應的速度。 如果服務器未成功返回，則完全不會進行UI更新。

具有即時響應的更簡單方法：

$(function() {
    $(document.body).delegate(".follow","click",function(){
        var element = $(this);
        var I = element.attr("id");
        var info = 'id=' + I;
        $("#loading").html('<img src="loader.gif"/>');

        $('#follow'+I).fadeOut(200); // act instantly since we assume it will go well
        $('#remove'+I).fadeIn(200);  // act instantly since we assume it will go well 

        $.ajax({
            type: "POST",
            url: "follow.php",
            data: info,
            complete: function(){ //always remove the loader no matter if it goes well or not
                $("#loading").slideUp();
            },
            error: function() {
               //handle error
              $('#follow'+I).fadeIn(200); // correct mistake
              $('#remove'+I).fadeOut(200);  // correct mistake
            }
        });
        return false;
    });
});