Jquery - addClass和removeClass不起作用

Question

我尝试从i标签切换课程。首先，我通过使用Jquery UI的switchClass来尝试它：

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

这不起作用。我发现其他人也遇到switchClass的问题，他被告知use removeClass and addClass instead，这对他有用。

然而，对我来说它不起作用，我现在很困惑。

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

＆＃13;

＆＃13;

$(document).ready(
  function() {
    $("#sidenav").on("click", function() {
      $("#sidenavIcon").toggleClass('fa-angle-double-right').toggleClass('fa-angle-double-left');
    });
  }
);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您在 HTML 中错过了一个双重报价，请按照以下步骤进行操作：
您已撰写id=sidenavIcon"，但应撰写id="sidenavIcon"

<div id="sidenav">
    <div id="sidenavIconWrap">
        <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i>
    </div>
</div>

Answer 3

您忘了在

中添加一个开头

<i id=sidenavIcon">

你可以这样检查：

document.getElementById("sidenavIcon") 

返回null

document.getElementById("sidenavIcon\"")

返回你的div元素。

所以目前你的ID是 sidenavIcon“

Answer 4

试试这个解决方案，它的工作顺利进行

将id=sidenavIcon"替换为id="sidenavIcon"

＆＃13;

＆＃13;

$(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');
        }
    });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

jQuery：使用toggleClass（）;而不是switchClass（）或添加或删除类。 HTML：添加miss＆＃34;在 id = sidenavIcon＆＃34; 之前

＆＃13;

＆＃13;

$(document).ready(function() {

$("#sidenav").on("click", function() {

  $("#sidenavIcon").toggleClass('fa-angle-double-right fa-angle-double-left');
});
  });

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;