javascript - Jquery - addClass and removeClass not working - Stack Overflow

admin管理员组

文章数量:1330925

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 23, 2017 at 10:31 CommunityBot 111 silver badge asked Apr 6, 2017 at 9:47 BlackBlack 20.4k4646 gold badges185185 silver badges296296 bronze badges 1

• SO, now it's working now? – Rana Ghosh Commented Apr 6, 2017 at 9:56

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You 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