使用 javascript 动态切换 FA 图标不会 return 原始图标

Question

我有一个看起来像这样的按钮：

<button class="btn btn-sm btn-xs-block btn-success" :data-lane-id="items[0].lane.id" type="button" v-on:click="callNextCustomer(items[0].lane.id)" :class="hasMorePeople(items)">Next Customer <i class="fas fa-bell"></i></button>

按下按钮后，callNextCustomer 函数运行以下内容：

const spinnerIcon = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
var button = document.querySelectorAll('button[data-lane-id="'+lane_id+'"]')
button[0].disabled = true;
button[0].innerHTML = 'Next Customer ' + spinnerIcon;
// run external request using promise
// when complete run the following
button[0].disabled = false;
button[0].innerHTML = 'Next Customer <i class="fas fa-bell"></i>';

执行代码时，文本按预期更改，但图标不显示。使用 Google Dev Inspector 我可以看到图标标记存在。

谁能解释一下为什么没有显示？我正在使用 Font Awesome v5，~~我将 CSS 和 JS 都加载到我的页面~~，我加载了以下 JS：

<script data-search-pseudo-elements defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>

Answer 1

IIRC，这是因为使用 font awesome 5，所有图标都在页面加载时加载。因为您是事后编辑 innerHTML，所以您添加的超赞字体脚本的“JS”部分不会再次触发以使用 fa-bell 图标进行更新。

Answer 2

如果加载两个图标并将隐藏的 class 放在另一个图标上，并在单击按钮时将两个图标 class 切换为隐藏会怎样？

<button class="btn btn-sm btn-xs-block btn-success" :data-lane-id="items[0].lane.id" type="button" v-on:click="callNextCustomer(items[0].lane.id)" :class="hasMorePeople(items)">
Next Customer 
<span class="icon hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<i class="icon fas fa-bell"></i>
</button>

.icon.hidden  {
   display: none;
}

单击按钮时，您只需执行 $.jquery 命令即可将 .icon 的 class 切换为隐藏，每次单击它们的 class 将切换为隐藏。

第 1 单击

并添加了隐藏的< i class="icon hidden fas fa-bell">class。

第2次点击反之

使用 javascript 动态切换 FA 图标不会 return 原始图标

Using javascript to dynamically toggle FA icons doesn't return original icon

javascript

font-awesome

font-awesome-5