[英]Can't change font awesome icon with Javascript
I created a code that changes the class of an svg icon. 我创建了一个代码来更改svg图标的类。 Using Chrome's inspect I can see that it has sucessfully changed svg class from 'fa-circle' to 'fa-check-circle as intended.
使用Chrome的检查,我可以看到它已按预期将svg类成功地从“ fa-circle”更改为“ fa-check-circle”。 However the icon remains the same and nothing happens.
但是,图标保持不变,没有任何反应。
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" )
}
});
}
Is there something about svg's that I'm missing? 关于svg的内容我有什么遗漏吗? The complete function is here: https://pastebin.com/3Dyv25xf
完整的功能在这里: https : //pastebin.com/3Dyv25xf
I think jquery is using setAttribute() for attaching property value to node. 我认为jQuery正在使用setAttribute()将属性值附加到节点。 For svg we have to use setAttributeNS() method.
对于svg,我们必须使用setAttributeNS()方法。
Can you try the below code 你可以尝试下面的代码吗
$(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
Use CSS pseudo-elements and pseudo-class :hover
. 使用CSS伪元素和伪类
:hover
。 CSS incurs less processing power than JS/jQ, it's simpler to write and maintain, and IMO performs better. 与JS / jQ相比,CSS的处理能力更小,更易于编写和维护,并且IMO的性能更好。 Refer to CSS Pseudo-Elements |
请参阅CSS伪元素| Font Awesome
字体很棒
HTML 的HTML
<i class="icon circle"></i>
See Demo for CSS 参见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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.