Jquery 切换 Class with font awesome not refreshing

Question

所以我有一个 Bootstrap 4 模态 table in.

<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 不是函数”错误）。

我什至不知道在更改 class 时我必须 'refresh' 一个按钮 UI。谁能给我指出正确的方向？

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

Answer 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

使用的信息：。

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

Jquery 切换 Class with font awesome not refreshing

Jquery toggleClass with font awsome not refreshing

html

javascript

jquery

toggle

font-awesome