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

Question

我有一个可以扩展折叠的手风琴。 我设置了一些 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")。

Answer 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');

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

Answer 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");
}