使用FontAwesome更改文本時如何“刷新”（重新渲染）按鈕？

Question

我有以下用戶界面：

然后根據需要執行的操作和來自后端的響應，從那里動態更改按鈕Archive和Unarchive以及FontAwesome中的圖標。 響應基本上如下所示：

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

簡而言之：

• 在藍色行（已存檔的項目）中：如果我單擊“ Unarchive按鈕並且響應為true ，則應該：刪除背景色，將按鈕文本更改為“ Archive ，將按鈕類從“ unarchive-form archive-form更改為“ archive-form然后將FontAwesome圖標類，從fa fa-arrow-circle-up到fa fa-arrow-circle-down 。
• 在另一行（非歸檔項目）中：如果單擊“ Archive並且響應為true則應該：添加藍色背景，將按鈕文本更改為“ Unarchive ，將按鈕類從archive-form unarchive-form更改為“ unarchive-form然后更改從fa fa-arrow-circle-down到fa fa-arrow-circle-up的FontAwesome圖標類。

我幾乎涵蓋了所有內容（我將僅顯示一種情況的來源，因為它幾乎相同，並且我不想發表大量文章）：

$.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;
    }
});

Answer 2

據我了解，您只需要Archieve和UnArchieve的功能，

您可以嘗試以下腳本嗎

$(document).ready(function(){

    $(".unarchive-form").click(unArchieveToArchieve);
    $(".archive-form").click(archieveUnArchieve);

    function unArchieveToArchieve(){
        var btn = $(this);
        var rowId = $(this).parent().parent().parent().find(".to-upload").attr("data-form");

        var response = [{"row_id":rowId,"status" :true}];

        $.each(response, function (index, value) {
            var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');

            if (value.status === true) {
                this_row_tr.attr('class','');
                $(btn).text("Archieve");
                $(btn).removeClass("unarchive-form");
                $(btn).addClass("archive-form");
                $(btn).click(archieveUnArchieve)
            } else if (value.status === false) {
                this_row_tr.attr('class','error');
                all_deleted = false;
            }
        });
    }
    function archieveUnArchieve(){

        var btn = $(this);
        var rowId = $(this).parent().parent().parent().find(".to-upload").attr("data-form");

        var response = [{"row_id":rowId,"status" :true}];

        $.each(response, function (index, value) {
            var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');

            if (value.status === true) {
                this_row_tr.attr('class','info');
                $(btn).text("Unarchive");
                $(btn).removeClass("archive-form");
                $(btn).addClass("unarchive-form");
                $(btn).click(unArchieveToArchieve)
            } else if (value.status === false) {
                this_row_tr.attr('class' , 'error');
                all_deleted = false;
            }
        });

    }

});

我希望這能解決您的問題。

讓我知道您是否需要更多詳細信息。