切换活动类以更改字体真棒图标
[英]Toggling the active class to change the font awesome icon
问题描述
I have a dashboard where I have placed the font-awesome icons. 
我有一个仪表板，在其中放置了font-awesome图标。 I want to toggle between plus and minus when the dashboard item is clicked. 单击仪表板项目时，我想在加号和减号之间切换。 But when I try to do that only the first item is getting toggled even when I click other dashboard items. 但是，当我尝试执行此操作时，即使单击其他仪表板项目，也只能切换第一项。
$(".dropdown").click(function() { /*$(".dropdown").removeClass("active"); $(this).addClass("active");*/ if ($('#plusMinus').hasClass('fa-plus-square')) { $('#plusMinus').hasClass('fa-plus-square') $('#plusMinus').removeClass('fa-plus-square'); $('#plusMinus').addClass('fa-minus-square'); } else { $('#plusMinus').removeClass('fa-minus-square'); $('#plusMinus').addClass('fa-plus-square'); } });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="fa fa-plus-square" id="plusMinus" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
3 2017-02-03 11:42:50
You are using id s to select your icons. 您正在使用id来选择图标。 HTML id s are supposed to be unique in a page ( more info ), and when you try to select them with jQuery, you always get the first one it meets (see the jQuery ID selector docs ). HTML id应该在页面中是唯一的（ 更多信息 ），当您尝试使用jQuery选择它们时，您总是会得到它遇到的第一个（请参阅jQuery ID选择器docs ）。
To solve your issue, select the icons by starting from the clicked element using jQuery's .find method , and not the whole document, and use class es instead of id s: 要解决您的问题，请使用jQuery的.find方法 （而不是整个文档）从clicked元素开始选择图标，并使用es class而不是id ：
$(".dropdown").click(function() { var button = $(this).find('.plusMinus'); if (button.hasClass('fa-plus-square')) { button.removeClass('fa-plus-square'); button.addClass('fa-minus-square'); } else { button.removeClass('fa-minus-square'); button.addClass('fa-plus-square'); } });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="plusMinus fa fa-plus-square" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
解决方案2
2 2017-02-03 11:44:17
The problem is that in your control you used a common ID , and ID's can't be more than one, so JQuery find always the first element. 问题在于，您在控件中使用了通用ID ，并且ID不能超过一个，因此JQuery总是查找第一个元素。 If you want to get the clicked element you have to use this , look at this example: 如果要获得clicked元素，则必须使用this ，请看以下示例：
$(".dropdown").click(function() { /*$(".dropdown").removeClass("active"); $(this).addClass("active");*/ if ($(this).find("#plusMinus").hasClass('fa-plus-square')) { $(this).find("#plusMinus").hasClass('fa-plus-square') $(this).find("#plusMinus").removeClass('fa-plus-square'); $(this).find("#plusMinus").addClass('fa-minus-square'); } else { $(this).find("#plusMinus").removeClass('fa-minus-square'); $(this).find("#plusMinus").addClass('fa-plus-square'); } });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="fa fa-plus-square" id="plusMinus" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
解决方案3
2 已采纳 2017-02-03 11:47:42
Identifiers in HTML must be unique Your HTML is invalid. HTML中的标识符必须是唯一的HTML无效。 I would recommend to add a common class ie plusMinus and then use it. 我建议添加一个通用类，即plusMinus ，然后使用它。
You need to target element in current element ie this context and use $.fn.find() to descendant of current element and the use $.fn.toggleClass() 您需要在当前元素（即this上下文）中定位元素，并使用$.fn.find()作为当前元素的后代，并使用$.fn.toggleClass()
$(".dropdown").click(function() {
$(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square');
});
HTML 的HTML
<i class="plusMinus fa fa-plus-square" aria-hidden="true"></i>
$(".dropdown").click(function() { $(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square'); });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="plusMinus fa fa-plus-square" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 React 切换 Font Awesome 5 图标 - Toggling Font Awesome 5 icon with React
切换字体真棒图标（如果启用）？ - Toggle font awesome icon if active?
单击更改“真棒字体”图标 - Change Font Awesome Icon on click
更改 jquery 中的字体真棒图标 - change font awesome icon in jquery
仅更改字体真棒图标 - Change Font Awesome Icon Only
jQuery Accordion在点击时更改字体真棒图标类 - jQuery Accordion change font awesome icon class on click
字体很棒的图标和切换 - Font awesome icons and toggling
切换字体真棒图标 - Toggling Font Awesome Icons
Font Awesome 5图标的类绑定更改不会影响图标 - Font Awesome 5 icon's class binding change doesn't affect the icon
更改字体真棒图标在悬停时旋转和缩放 - change font awesome icon rotate and scale in on hover
相关标签