Jquery - addClass和removeClass不起作用

Question

我试图从i标签切换类.首先,我尝试使用Jquery UI,switchClass如下所示:

$( "#sidenavIcon" ).switchClass('fa-angle-double-right', 'fa-angle-double-left');

这不起作用.我发现其他人也有问题,switchClass他被建议使用removeClass,addClass而不是,这对他有用.

但是,对我来说它不起作用,我现在很困惑.

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

更新:

确实是因为失踪了".我信任PhpStorm找到这个并指出它...我学到了:永远不要相信你的IDE,即使你有一个昂贵的IDE.

Answer 1

你缺少一个"在<i id=sidenavIcon".我改变了它后它起作用了.如果你婉乳头切换,继续前进的开关都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>