Question

嗨，我正在处理需要大量ajax调用的事情。我有一个隐藏的div，就像这样：

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

然后每当我拨打ajax电话$('.changes-made').fadeIn(300);

最后在ajax complete: function()上我可以致电$('.changes-made').fadeOut(500);

我想让这个也可以重复使用错误。我开始这样做的方式似乎我在房子周围，所以我认为必须有一个更好的方法来实现这个

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

Ajax动态“Saving Changes”div

1 个答案: