当元素被点击时，更改font真棒图标/类

Question

我有一个图标<i id="test" class="fas fa-times-circle"></i>

点击后，我想更改它的类，以便成为<i id="test" class="far fa-times-circle"></i>

因此，基本上删除fas并添加far，如果再次单击，则反之亦然。

https://jsfiddle.net/bobbyrne01/ptsgba1h/7/

HTML:

<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>

Javascript：

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

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

Answer 1

您使用的是带有JavaScript的出色版本SVG，它用<svg>替换了与一组标准匹配的<i>标签(以及其他标签(

因此，在您的情况下，将data-prefix属性更改为fas或far

这是一个完整的示例

$(document).ready(function() {
$(document).on('click','#test', function() {
console.log(this);
//$(this).data("prefix",$(this).data("prefix")== 'fas' ? 'far' : 'fas')
$(this).attr("data-prefix", function(index, attr){
return attr == 'fas' ? 'far' : 'fas';
	  })
});
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<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>

Answer 2

当与far/fas一起使用时，<i>元素将替换为基于fa-*类的svg元素，并且它们包含此类类：svg-inline--fa fa-times-circle fa-w-16。这就是类切换代码不起作用的原因

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