Ajax dynamic "Save Changes" div

Question

こんにちは私は、多くのajax呼び出しを必要とする何かに取り組んでいます。私がしたい$('.changes-made').fadeIn(300);

が、最終的にAJAX complete: function()に私は$('.changes-made').fadeOut(500);

を呼び出すことができます私はAJAX呼び出しを行うたび、その後

<div class="text-center changes-made" style="display:none;"> 
    <span id="changes-text">Saving Changes</span> 
    <span id="changes-icon" class="fa faa-passing animated"></span> 
</div> 

： 私はこのようになる隠されているdiv要素を持っていますこのエラーを再利用可能にする。私は完全ではこの

example ajax-start function() { 
    $('.changes-made #changes-text').html("Saving Changes"); 
    $('.changes-made #changes-icon').addClass("fa-ellipsis-h"); 
    $('.changes-made').fadeIn(300); 
} 

error: function(){ 
    $('.changes-made #changes-icon').removeClass("fa-ellipsis-h"); 
    $('.changes-made #changes-icon').addClass("fa-exclamation-triangle"); 
    $('.changes-made #changes-text').html("Failed to update"); 
}, 
complete: function(){ 
    $('.changes-made').fadeOut(500); 
    $('.changes-made #changes-icon').removeClass("fa-ellipsis-h"); 
    $('.changes-made #changes-icon').removeClass("fa-exclamation-triangle"); 
    $('.changes-made #changes-text').html(""); 
} 

を達成するためのより良い方法があるに違いありません考え出したので、私は家の周りつもりのように私はそれをやって開始している方法は、私は、エラーがスローされたばかりの場合には、両方のクラスを削除していそうです...そのクラスは残っていて、そこに置かれたテキストを削除します。

これは説明するための反復のようです...どのように私はそれが私が欲しい任意のメッセージの任意のタイプのメッセージに使用できるようにする上で改善することができますか？

ありがとうございました。

Answer 1

jQueryの.removeClass()メソッドに引数を渡さないと、その要素のすべてのクラスが削除されます。これで、次のようなことができます：

function displayMessage(messageHtml, iconClass) { 
    $('.changes-made #changes-text').html(messageHtml); 
    $('.changes-made #changes-icon').addClass(iconClass); 
    $('.changes-made').fadeIn(300); 
} 
function removeMessage() { 
    $('.changes-made').fadeOut(500, emptyMessage); 
} 
function emptyMessage() { 
    $('.changes-made #changes-text').empty(); 
    $('.changes-made #changes-icon').removeClass(); 
} 


function saveChanges() { 
    displayMessage("Saving changes", "fa-ellipsis-h"); 
    $.ajax({ 
     // your params here... 
    }).done(function() { 
     removeMessage(); 
     // whatever else you need to do 
    }).fail(function() { 
     emptyMessage(); 
     displayMessage("Failed to update", "fa-exclamation-triangle"); 
    }); 
}