jquery 更改fontawesome图标/类时，元素被点击

wb1gzix0 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(175)

我有一个图标
点击后，我想改变它的类，以成为
因此，基本上删除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');
  });
});

你知道为什么类没有被切换吗？

jquery

来源：https://stackoverflow.com/questions/60586301/change-fontawesome-icon-class-when-element-is-clicked

2条答案

按热度按时间

iq0todco1#

你使用的是带有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>

赞(0）回复(0）举报 2023-06-22

ggazkfy82#

当与far/fas一起使用时，元素被基于fa-*类的svg元素替换，它们包含以下类型的类：svg-inline--fa fa-times-circle fa-w-16。这就是类切换代码不起作用的原因
更好的解决方案是在单击时显示/隐藏相应的图标。