Javascript 单击元素时更改图标/类

我有一个图标

单击时，我想更改它的类，以便成为

因此，基本上删除

fas

并添加

far

，如果再次单击，则vica也可以

HTML:

你知道为什么不切换这些类吗？

当与

far

/

fas

一起使用时，

元素被替换为基于

fa-*

类的

svg

元素，并且它们包含这样的类：

svg内联--fa-fa-times圆fa-w-16

。这就是类切换代码不起作用的原因

---

一个更好的解决方案是在单击时显示/隐藏相应的图标。

您使用的是带JavaScript的Aweasome版本SVG，它将

标记（和其他标记）替换为与

匹配的一组标准

因此，在您的情况下，将

数据前缀

attr更改为

fas

或

far

这里有一个完整的例子

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'测试'，函数（）上）{
console.log（this）；
//$（this）.data（“前缀”、$（this）.data（“前缀”）=='fas'？'far'：'fas'）
$（this）.attr（“数据前缀”，函数（索引，attr）{
return attr=='fas'？'far'：'fas'；
})
});
});


delegate（）
早就被弃用了，您真的不应该使用它。改用。类似地，用于检索数据属性，而不是
attr（）
。在本例中，如果使用
。
您将看到它只记录一次，但是
。delegate（）
不会记录，而对于
attr
我使用它是因为回调函数，并且它在endI agree处做出相同的行为，函数参数模式对于
attr（）
来说很好，但是出于很多原因，使用jQuery的
数据
缓存还是更好的，尤其是一致性。还要注意，使用正确的委托签名时，
on（）
可以正常工作。阅读我链接到的文档。在本例中，它是
$（document）.on（'click'，'#test，fn）
。在这个例子中甚至不需要事件委派。您使用
.on（）
函数是正确的，我为它编辑了答案，但是对于
.data
它没有产生预期的结果，但是
attr（）
做到了
<i class="fas fa-times-circle"></i>
<i class="far fa-times-circle"></i>
<hr/>

<div>
  <i id="test" class="fas fa-times-circle"></i>
</div>

$(document).ready(function() {
  $('#test').on('click', function() {
    console.log(this);
    $(this).toggleClass('fas');
    $(this).toggleClass('far');
  });
});