堆栈内存溢出
  繁体   English   中英

切换活动类以更改字体真棒图标

[英]Toggling the active class to change the font awesome icon

 原文  2017-02-03 11:36:47  1   3    javascript/ jquery/ html/ css

问题描述

我有一个仪表板，在其中放置了font-awesome图标。 单击仪表板项目时，我想在加号和减号之间切换。 但是，当我尝试执行此操作时，即使单击其他仪表板项目，也只能切换第一项。 

 $(".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

您正在使用id来选择图标。 HTML id应该在页面中是唯一的（ 更多信息 ），当您尝试使用jQuery选择它们时，您总是会得到它遇到的第一个（请参阅jQuery ID选择器docs ）。

要解决您的问题，请使用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

问题在于，您在控件中使用了通用ID ，并且ID不能超过一个，因此JQuery总是查找第一个元素。 如果要获得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

HTML中的标识符必须是唯一的HTML无效。 我建议添加一个通用类，即plusMinus ，然后使用它。

您需要在当前元素（即this上下文）中定位元素，并使用$.fn.find()作为当前元素的后代，并使用$.fn.toggleClass() 

$(".dropdown").click(function() {
    $(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square');
});

的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 图标 切换字体真棒图标（如果启用）？ 单击更改“真棒字体”图标 更改 jquery 中的字体真棒图标 仅更改字体真棒图标 jQuery Accordion在点击时更改字体真棒图标类 字体很棒的图标和切换 切换字体真棒图标 Font Awesome 5图标的类绑定更改不会影响图标 更改字体真棒图标在悬停时旋转和缩放
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM