admin管理员组文章数量:1323224
I tried to switch the class from an i
tag. First I tried it by using Jquery UI's switchClass
like this:
$( "#sidenavIcon" ).switchClass('fa-angle-double-right', 'fa-angle-double-left');
This was not working. I discovered that someone else also had a problem with switchClass
and he was adviced to use removeClass
and addClass
instead, which worked for him.
However, for me it does not work, and I am 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=".7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src=".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>
I tried to switch the class from an i
tag. First I tried it by using Jquery UI's switchClass
like this:
$( "#sidenavIcon" ).switchClass('fa-angle-double-right', 'fa-angle-double-left');
This was not working. I discovered that someone else also had a problem with switchClass
and he was adviced to use removeClass
and addClass
instead, which worked for him.
However, for me it does not work, and I am 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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./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 was indeed because of the missing "
. I trusted PhpStorm to find this and point it out... I learned: never trust your IDE, even if you have a expensive one.
- SO, now it's working now? – Rana Ghosh Commented Apr 6, 2017 at 9:56
5 Answers
Reset to default 6You were missing a "
in <i id=sidenavIcon"
. It worked after I changed that. If you wan tit to toggle, go ahead and switch both addClass
and removeClass
with 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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./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>
You just missed one double quote in your HTML, please follow below:
You have writen id=sidenavIcon"
, but you should write id="sidenavIcon"
<div id="sidenav">
<div id="sidenavIconWrap">
<i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
</div>
</div>
You forgot to add an opening " in
<i id=sidenavIcon">
you can check it like this :
document.getElementById("sidenavIcon")
returns null
document.getElementById("sidenavIcon\"")
returns your div element.
So currently youe Id is sidenavIcon"
Try this solution it's work smoothly
replace id=sidenavIcon"
with id="sidenavIcon"
$(document).ready(function () {
$("#sidenav").on("click", function () {
if ($("#sidenavIcon").hasClass("fa-angle-double-right")) {
$("#sidenavIcon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
}
else {
$("#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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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>
jQuery: use toggleClass(); instead of switchClass() or add or remove class. HTML: Add the miss " before id= sidenavIcon"
$(document).ready(function() {
$("#sidenav").on("click", function() {
$("#sidenavIcon").toggleClass('fa-angle-double-right 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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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>
本文标签: javascriptJqueryaddClass and removeClass not workingStack Overflow
版权声明:本文标题:javascript - Jquery - addClass and removeClass not working - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742069735a2419048.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论