javascript - 使用 FontAwesome 时文本更改时如何 "refresh"(重新渲染)按钮？

Question

我有以下用户界面:

从那里我需要根据所采取的操作和后端的响应动态更改按钮Archive和Unarchive以及FontAwesome的图标。响应基本上如下所示:

{"row_id":"12518","status":true}

简而言之:

• 在蓝色行(已存档项目)中:如果我点击取消存档按钮且响应为true，我应该:删除背景颜色，将按钮文本更改为Archive，将按钮类从 unarchive-form 更改为 archive-form 并将 FontAwesome 图标类从 fa fa-arrow- 更改向上圆圈 到fa fa-arrow-circle-down。
• 在另一行(非存档项目)中:如果我点击“存档”并且响应为“true”，那么我应该:添加蓝色背景，更改按钮文本到 Unarchive，将按钮类从 archive-form 更改为 unarchive-form 并将 FontAwesome 图标类从 fa fa-arrow 更改-circle-down 到 fa fa-arrow-circle-up。

我几乎涵盖了所有内容(我只会展示一个案例的来源，因为它几乎相同，而且我不想发表一篇大文章):

$.ajax({
    url: '/ajax/forms/archive',
    type: 'POST',
    dataType: 'json',
    data: {
        form_id: ids
    }
}).done(function (response) {
    $.each(response, function (index, value) {
        var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr'),
            this_btn = this_row_tr.find('.archive-form');

        if (value.status === true) {
            // here I add the background color to the TR 
            this_row_tr.addClass('info');
            // here I swap the button class 
            this_btn.removeClass('archive-form').addClass('unarchive-form');
            // here I swap the button text and also the whole FontAwesome part
            this_btn.text('<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Unarchive');
        } else if (value.status === false) {
            this_row_tr.addClass('error');
            all_archived = false;
        }
    });

    if (all_archived) {
        toastr["success"]("The forms were archived successfully.", "Information");
    } else {
        toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
    }
}).error(function (response) {
    console.log(response);
    toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
});

但是当我更改 FontAwesome 的文本时，问题就出现了，因为我得到的是纯文本而不是图标。例如点击第一行的Unarchive将会变成这样:

正如您所看到的，除了 FontAwesome 图标之外，一切都很好。有没有办法刷新按钮以使更改生效？或者您知道其他方法可以实现这一目标吗？

Answer 1

您不必像现在一样更改文本，而是使用 .html() 并仅替换必要的字符串，这样您就可以保持按钮内容的结构。

试试这个:

// this one is for the Archive action
$.each(response, function (index, value) {
    var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
    var archiveToUnarchive = this_row_tr.find('.btn[class*="archive"]');
    if (value.status === true) {
        this_row_tr.addClass('info');
        archiveToUnarchive.toggleClass('archive-form unarchive-form')
                .html(archiveToUnarchive.html()
                .replace('Archive', 'Unarchive')
                .replace('fa-arrow-circle-down', 'fa-arrow-circle-up'));
    } else if (value.status === false) {
        this_row_tr.addClass('error');
        all_deleted = false;
    }
});

// this one is for the Unarchive action
$.each(response, function (index, value) {
    var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
    var unarchiveToArchive = this_row_tr.find('.btn[class*="archive"]');

    if (value.status === true) {
        unarchiveToArchive.toggleClass('archive-form unarchive-form')
                .html(unarchiveToArchive.html()
                .replace('Unarchive', 'Archive')
                .replace('fa-arrow-circle-up', 'fa-arrow-circle-down'));
        this_row_tr.removeClassName('info');
    } else if (value.status === false) {
        this_row_tr.addClass('error');
        all_deleted = false;
    }
});