图标在 javaScript 点击时不会改变
[英]Icon not changing on click by javaScript
问题描述
Here you can see the when I click on the icon it doesn't change.
在这里你可以看到当我点击图标时它没有改变。 How to change it如何改变它
$(document).ready(function(){ $('.fa fa-bars').click(function(){ $(this).toggleClass('fa fa-times'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <script src="java.js"></script> <script src="https://use.fontawesome.com/16ca663e5d.js"></script> </head> <body> <header > <nav > <ul > <li> <a >Home</a> </li> <li > <a>Gallery</a> </li> <li > <a >Contact</a> </li> <li> <a >Sign in</a> </li> </ul> </nav> <i class="fa fa-bars ham" aria-hidden="true"></i> </header> <section id="home" class="container-fluid"> </section> <script> $(document).ready(function(){ $('.fa fa-bars').click(function(){ $(this).toggleClass('fa fa-times'); }); }); </script> </body> </html>
2 个解决方案
解决方案1
0 已采纳 2021-10-28 10:31:58
As I mentioned in the comment, you have to change $('.fa fa-bars') to $('.fa.fa-bars') and then your toggleClass should look like .toggleClass('fa-bars fa-times')正如我在评论中提到的，您必须将$('.fa fa-bars')更改$('.fa.fa-bars')然后您的 toggleClass 应该看起来像.toggleClass('fa-bars fa-times')
$(document).ready(function() {
$('.fa.fa-bars').click(function() {
$(this).toggleClass('fa-bars fa-times');
});
});
Problem is that $('.fa fa-bars') means that you are looking for an element with the class fa and you are looking for a child of that element of the type fa-bars , if that existed it would look like <fa-bars></fa-bars>问题是$('.fa fa-bars')意味着您正在寻找一个类为fa的元素，并且您正在寻找fa-bars类型的该元素的子元素，如果存在它看起来像<fa-bars></fa-bars>
Demo演示
$(document).ready(function() { $('.fa.fa-bars').click(function() { $(this).toggleClass('fa-bars fa-times'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <script src="java.js"></script> <script src="https://use.fontawesome.com/16ca663e5d.js"></script> </head> <body> <header> <nav> <ul> <li> <a>Home</a> </li> <li> <a>Gallery</a> </li> <li> <a>Contact</a> </li> <li> <a>Sign in</a> </li> </ul> </nav> <i class="fa fa-bars ham" aria-hidden="true"></i> </header> <section id="home" class="container-fluid"> </section> <script> $(document).ready(function() { $('.fa fa-bars').click(function() { $(this).toggleClass('fa fa-times'); }); }); </script> </body> </html>
解决方案2
-1 2021-10-28 10:23:52
I did some changes to your code now it's working.我对您的代码进行了一些更改，现在它可以工作了。 you must follow this link toggle class concept to properly understand toggle class how to work.您必须遵循此链接切换类概念才能正确理解切换类的工作原理。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script> $(document).ready(function () { $(".fa-bars").click(function(e){ $(this).toggleClass("fa-bars fa-times"); //you can list several class names }); }); </script> </head> <body> <i class="fa fa-bars"></i> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.