Function 不切换我该如何解决这个问题？
[英]Function not toggling how do I fix this problem?
问题描述
当元素第一次点击它的颜色应该变成红色。 那部分有效。 当第二次点击元素时，它应该变成黑色，它是初始默认颜色，依此类推。 那是行不通的部分。 一旦元素变成红色，它就会保持在那个“状态”。
function toggleClass() { var monday = document.getElementById("monday"); monday.classList.add("redColor"); monday.classList.remove("redColor"); this.classList.toggle("redColor"); } monday.addEventListener("click", toggleClass)
.greenColor { color: green; }.redColor { color: red; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Practise App</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="monday" class="">Monday</div> <script src="index.js" type="text/javascript"></script> </body> </html>
3 个解决方案
解决方案1
2 2021-02-05 11:54:01
您只需要切换，它会为您切换 class - 您不需要添加或删除： monday.classList.toggle("redColor");
例如：
function toggleClass() {
var monday = document.getElementById("monday");
monday.classList.toggle("redColor");
}
function toggleClass() { var monday = document.getElementById("monday"); monday.classList.toggle("redColor"); } monday.addEventListener("click", toggleClass)
.greenColor { color: green; }.redColor { color: red; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Practise App</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="monday" class="">Monday</div> <script src="index.js" type="text/javascript"></script> </body> </html>
解决方案2
1 2021-02-05 11:54:06
DOMTokenList接口的
toggle()方法从列表中删除给定的标记并返回false。 如果令牌不存在，则添加它并且 function 返回true。
您不需要使用add()和remove() ，只需toggle()就可以了。
另外，由于this关键字是指当前点击的元素，我认为你不需要在这里通过 id 获取元素：
function toggleClass() { this.classList.toggle("redColor"); } monday.addEventListener("click", toggleClass)
.redColor { color: red; }.greenColor { color: green; }
<div id="monday" class="">Monday</div>
解决方案3
1 2021-02-05 12:00:22
你不需要这两条指令：
monday.classList.add("redColor");
monday.classList.remove("redColor");
只要拨动就够了。 此外，如果您已经在变量monday中捕获了 div，则不需要对this的引用：
function toggleClass() {
var monday = document.getElementById("monday");
monday.classList.toggle("redColor");
}
monday.addEventListener("click", toggleClass)
这应该可以解决问题。
这里有一支笔来说明： https://codepen.io/ePresas/pen/BaQjVwG
navigation.dangerouslyGetParent 不是 function 我该如何解决这个问题？
[英]navigation.dangerouslyGetParent is not a function How can i fix this problem?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.