javascript - Jquery - addClass and removeClass not working -
i tried switch class i tag. first tried using jquery ui's switchclass this:
$( "#sidenavicon" ).switchclass('fa-angle-double-right', 'fa-angle-double-left'); this not working. discovered else had problem switchclass , adviced use removeclass , addclass instead, worked him.
however, me not work, , confused now.
$(document).ready( function() { $("#sidenav").on("click", function() { $("#sidenavicon").addclass('fa-angle-double-right').removeclass('fa-angle-double-left'); }); } ); #sidenav { background-color: #333333; color: white; height: 100vh; width: 10vw; position: relative; } #sidenav:hover { cursor: pointer; } #sidenaviconwrap { font-size: 50px; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #sidenavicon { color: white; font-size: 20px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidenav"> <div id="sidenaviconwrap"> <i id=sidenavicon" class="fa fa-angle-double-left" aria-hidden="true"></i> </div> </div> update:
it indeed because of missing ". trusted phpstorm find , point out... learned: never trust ide, if have expensive one.
you missing " in <i id=sidenavicon". worked after changed that. if wan tit toggle, go ahead , switch both addclass , removeclass toggleclass.
$(document).ready( function() { $("#sidenav").on("click", function() { $("#sidenavicon").toggleclass('fa-angle-double-right').toggleclass('fa-angle-double-left'); }); } ); #sidenav { background-color: #333333; color: white; height: 100vh; width: 10vw; position: relative; } #sidenav:hover { cursor: pointer; } #sidenaviconwrap { font-size: 50px; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #sidenavicon { color: white; font-size: 20px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidenav"> <div id="sidenaviconwrap"> <i id="sidenavicon" class="fa fa-angle-double-left" aria-hidden="true"></i> </div> </div> 
Comments
Post a Comment