Javascript 如何"；刷新“；（重新渲染）按钮，当文本在使用Fontsome时发生更改？

我有以下用户界面：

从那里，我需要动态更改按钮

Archive

和

Unarchive

，以及Fontsome中的图标，具体取决于所采取的操作和后端的响应。答案基本上是这样的：

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

简言之：

• 在蓝色行（存档项）：如果我单击

  Unarchive

  按钮，并且响应为

  true

  ，我应该：删除背景色，将按钮文本更改为

  Archive

  ，将按钮类从

  unarchive form

  更改为

  archive form

  ，并将图标类从

  fa-fa-arrow-circle-up

  更改为

  fa-fa-arrow-circle-down

• 在另一行（非存档项）：如果我单击

  Archive

  并且响应为

  true

  ，那么我应该：添加蓝色背景，将按钮文本更改为

  Unarchive

  ，将按钮类从

  archive form

  更改为

  unarchive form

  ，并将图标类从

  fa-fa-arrow-circle-down

  更改为

  fa-fa-arrow-circle-up

我几乎涵盖了所有内容（我将仅展示一个案例的来源，因为它几乎相同，我不想发表一篇大文章）：

$.ajax({
url:“/ajax/forms/archive”，
键入：“POST”，
数据类型：“json”，
数据：{
表格编号：ids
}
}).完成（功能（响应）{
$.each（响应、函数（索引、值）{
var this_row_tr=$（'input[data form='+value.row_id+']）。最近（'tr'），
this_btn=这一行的tr.find（'.archive form'）；
如果（value.status==true）{
//在这里，我将背景色添加到TR
这一行的tr.addClass（'info'）；
//这里我交换了button类
此_btn.removeClass（'archive-form'）.addClass（'unarchive-form'）；
//在这里，我交换了按钮文本和整个部分
此文本（“非归档”）；
}else if（value.status==false）{
这一行是addClass（'error'）；
all_=false；
}
});
如果（所有已存档）{
toastr[“成功”]（“表格已成功存档。”，“信息”）；
}否则{
toastr[“error”]（“出错，表单无法存档。”，“error”）；
}
}).错误（功能（响应）{
控制台日志（响应）；
toastr[“error”]（“出错，表单无法存档。”，“error”）；
});

但是当我更改字体的文本时，问题来了，因为我得到的是纯文本而不是图标。例如，单击第一行中的

Unarchive

，将变成：

---

正如你在那里看到的一样，一切都很好，但是Fontsomeas图标。有没有办法刷新按钮使更改生效？或者您知道实现此目的的其他方法吗？

据我所知，您只需要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;
            }
        });

    }

});

我希望这能解决你的问题

---

如果您需要进一步的详细信息，请告诉我。

您不必像现在这样更改文本，而是使用

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

---

请您也添加响应文本好吗？@AlpeshJikadra done，在Ope上。一旦HTML在浏览器中呈现，您可以显示它吗？我不认为用于生成行的脚本与问题相关；除非我遗漏了一些东西，否则我认为我们需要看到的只是：html（您要修改/操作的html）、ajax脚本和事件处理程序（启动和处理对后端的调用）以及响应文本。@DavidThomas html代码的最后一个片段是呈现的代码的样子。我只是添加

$。每个
循环，但我将编辑OP，删除不必要的内容，并添加您要求的内容me@ReynierPM，如果我再次单击相同的按钮，如从Archieve到UnArchieve，然后再从Archieve到UnArchieve，这就是roking。@AlpeshJikadra；由于OP有两个
$。每个

用于分离场景（unarchiveTorchive和n archiveToUnarchive），因此应该没有问题。如果OP只想使用一个

$。每个
，那么应该根据按钮的当前状态添加更多的逻辑来替换，但是在这种情况下，OP所说的相关部分是他/她正在使用
.text（）
而不是
.html（）
和
.replace（）
，这会在button@AlpeshJikadra. 要在不使用ajax调用的情况下模拟按钮的行为，请尝试：
$（document）.on（'click'，'button.archive form'，function（）{$（this）.toggleClass（'archive-form-unarchive form'）.html（$（this）.html（）.replace（'archive'，'unarchive'）.replace（'fa arrow-circle-down'，'fa arrow-circle-up'）；}）和
存档
HIH
// 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;
    }
});