使用 Javascript 更改字体真棒图标 - 展开/折叠手风琴答案

【问题标题】：Change Font Awesome Icon with Javascript - Expand/Collapse Accordion使用 Javascript 更改字体真棒图标 - 展开/折叠手风琴
【发布时间】：2018-04-05 18:57:45
【问题描述】：

我有一个可以展开折叠的手风琴。我设置了一些 FontAwesome 图标来帮助说明它何时打开和关闭 - 但是，我似乎无法让它更改图标。

我是根据我看到的其他 StackOverflow 帖子来了解这些知识的 - 但由于某种原因，我似乎无法让我的工作。如果我不得不猜测我肯定会错过 jQuery 的球。我在那里挣扎，所以我假设我没有选择正确的元素。

我只将手风琴的代码块放入 JSFiddle： https://jsfiddle.net/ehkv99h9/18/

$(this).find($(".fa")).removeClass('fa-caret-right').addClass('fa-caret-down');

是我认为让我绊倒的原因（如我的 jsfiddle 中的第 14 行所示 - 我现在注释掉了，因为它不起作用）

我尝试向console.log 写一些东西来帮助确定我是否在我的代码中选择了正确的部分，但不幸的是我无法弄清楚。

为了让插入符号在展开时旋转到向下位置，我需要进行哪些更改？

（注：我有几个箭头，我正在测试不同的图标，但我认为它会是相同的“fa-caret-right”/“fa-caret-down”与“fa-angle -right"/"fa-caret-down")。

【问题讨论】：

也许toggleClass?
好吧，你知道你在混合 vanilla js 和 jquery，对吧？
根据我的阅读内容，我认为这也可以。我在另一篇文章中发现了一些东西，说 .toggleClass 可以工作，然后你可以做 fa-rotate-90 （或任何程度）。我一直在努力解决的问题是让它发挥作用。我在代码中使用各种选择器尝试了几种不同的方法。我还在学习 jQuery，所以我假设我肯定在某个地方搞砸了。您是否有 .toggleClass 的示例（如果您参考我的 JSFiddle）。如果不是，我可以继续尝试，但我似乎错过了一些东西。
对，所以我查看了 fiddle，对其进行了大量修改以使用 jquery，并发现 .fas 被替换为没有 fa 类的 SVG。大概这就是FA现在做图标的方式，但这意味着你不能动态修改它们。
jsfiddle.net/yak613/gjgwtc1L

标签： javascript jquery html css font-awesome

【解决方案1】：

您需要使用最新版本的 FA，即 5.0.9

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>

和 jQuery 3.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

那么您可以使用文档提供的示例：

https://fontawesome.com/how-to-use/svg-with-js

在“支持动态更改”部分中

$(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');

您可以在 fiddle 中查看结果：https://jsfiddle.net/0hkd2sor/3/

【讨论】：

【解决方案2】：

您可以将此代码添加到切换类的 onclick 侦听器中

if(this.classList.value.indexOf("fa-caret-right") > -1){
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-right");
}else
{
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-down");
}

【讨论】：