字体惊人的Jquery toggleClass不刷新

如何解决字体惊人的Jquery toggleClass不刷新

所以我有一个带表的Bootstrap 4模式。

<div id="modaledithistory" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content px-2">
            <div class="modal-header">
                <button type="button" class="btn float-right" data-dismiss="modal"><i class="fas fa-times float-right"></i></button>
            </div>
            <div class="modal-body">
                <div id="edit_history_table">
                  <table class="table table-bordered table-responsive-md table-striped text-center">
                    <thead>
                      <tr>
                        <th class="text-center px-5">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center px-5">Example</th>
                      </tr>
                    </thead>
                    <tbody id="edit_history_table_body">
                      <tr class="hide">
                        <td class="pt-3-half" contenteditable="false">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td>
                          <span class="table-save">
                             <button type="button" class="btn btn-outline-success btn-rounded btn-sm my-0 waves-effect waves-light">
                                <i class="far fa-save"></i>
                             </button>
                          </span> 
                          <span class="table-remove">
                             <button type="button" class="btn btn-outline-danger btn-rounded btn-sm my-0 waves-effect waves-light">
                                <i class="far fa-trash-alt"></i>
                             </button>
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

第一个图标是一个保存图标，我希望它在单击时变为复选标记（永久或5秒钟左右）。 匹配的javascript是这个

const $tableID = $('#edit_history_table');

 $tableID.on('click','.table-save',function () {
    // SOME OTHER CODE THAT HAS NOTHING TO DO WITH THE ICON
    
    var btn = $(this).find("button:eq(0)");
    var icon = btn.find("i:eq(0)");

    console.log(btn);
    console.log(icon);
    
    
    //icon.toggle('1000');
    $(this).find('i').toggleClass('far').toggleClass('fas').toggleClass('fa-save').toggleClass('fa-check');
    //icon.toggleClass("far fa-save fas fa-check");
    
    /*
    if (icon.hasClass("fa-save")) {
        icon.addClass("fas").addClass("fa-check").removeClass("far").removeClass("fa-save");
    } else {
        icon.addClass("far").addClass("fa-save").removeClass("fas").removeClass("fa-check");
    }
    */
    
    //btn.button("refresh");
    btn.buttonMarkup('refresh');
 });

我已经尝试了很多事情（在评论中留下了一些内容），但是我无法使其正常工作。 现在它可以工作了，但是不推荐使用buttonMarkup（），所以我不知道为什么它真正起作用（它还会生成“ Uncaught TypeError：btn.buttonMarkup不是函数”错误）。

我什至不知道在更改类时必须“刷新”按钮UI。谁能指出我正确的方向？

https://jsfiddle.net/ogk93uhr/1/

解决方法

似乎没有正常的方式（我的意思是“快速简便”）来切换图标，所以...也许要替换它？

  var btn = $(this).find("button:eq(0)");

  const iconToggle = () => {
    const isCheckIcon = btn.find('.fa-check').length > 0;
    if (isCheckIcon) {
      btn.html('<i class="far fa-save"></i>')
    } else {
      btn.html('<i class="fas fa-check"></i>')
    }
  }

  iconToggle();
  setTimeout(iconToggle,2000);

此处的示例：jsfiddle

使用的信息：here。

P.S。一些解释：该图标不受CSS控制，因此切换类是不够的。您还应该切换'data- *'属性...但是如果仅内部图像是静态的，但是它是生成的SVG，则有可能...我尝试使用类和数据属性有一段时间了，但要花很多时间。