Question

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

2020-03-08

577

javascript html jquery font-awesome

我有一个图标 

当单击该图标时，我想更改它的类以使其成为 

因此，基本上删除 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>

因此，在您的情况下，将 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 一起使用时，  元素将被基于 fa-* 类的 svg 元素替换，它们包含以下类型的类： svg-inline--fa fa-times-circle fa-w-16 。这就是类切换代码不起作用的原因

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