无法使用Javascript更改字体真棒图标

Question

我创建了一个代码来更改svg图标的类。 使用Chrome的检查，我可以看到它已按预期将svg类成功地从“ fa-circle”更改为“ fa-check-circle”。 但是，图标保持不变，没有任何反应。

 function mouseOverEffect() {
                //JQUERY, FIND A VANILLA JS SOLUTION?
                $("#inbox-circle").mouseover(function() {                    
                    console.log($(this).hasClass('fa-circle'))
                    if ($(this).hasClass('fa-circle')) {                                              
                        $(this).removeClass( "fa-circle" ).addClass( "fa-check-circle" )

                    } 
                });
            }

关于svg的内容我有什么遗漏吗？ 完整的功能在这里： https : //pastebin.com/3Dyv25xf

Answer 1

我认为jQuery正在使用setAttribute（）将属性值附加到节点。 对于svg，我们必须使用setAttributeNS（）方法。

你可以尝试下面的代码吗

$(this).removeClass( "fa-circle" ) ;// After this code
//.addClass( "fa-check-circle" ) // comment this code

$(this)[0].setAttributeNS(null, "class", "far fa-check-circle" ); // add this line

Answer 2

使用CSS伪元素和伪类:hover 。 与JS / jQ相比，CSS的处理能力更小，更易于编写和维护，并且IMO的性能更好。 请参阅CSS伪元素| 字体很棒

的HTML

<i class="icon circle"></i>

参见CSS演示

 :root { font: 5vw/1.2 Verdana; } .icon::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; } .circle::before { font-weight: 400; content: "\\f111"; } .circle:hover::before { font-weight: 400; content: "\\f058"; cursor: pointer; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous"> <ul class='inbox'> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:red"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-21-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:gold"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-24-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:blue"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-29-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:gold"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-25-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> </ul>