Function 不切换我该如何解决这个问题？
[英]Function not toggling how do I fix this problem?
问题描述
When the element's first clicked on its color should turn red.
当元素第一次点击它的颜色应该变成红色。 That part works.那部分有效。 When the element's clicked on a second time it's should turn black, it's initial default color, and so on and so forth.当第二次点击元素时，它应该变成黑色，它是初始默认颜色，依此类推。 That's the part that doesn't work.那是行不通的部分。 Once the element turns red it stays in that "state".一旦元素变成红色，它就会保持在那个“状态”。
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
You just need the toggle, it will toggle the class for you - you don't need the add or remove: monday.classList.toggle("redColor");您只需要切换，它会为您切换 class - 您不需要添加或删除： monday.classList.toggle("redColor");
for example:例如：
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() DOMTokenList.toggle()
The
toggle()method of the DOMTokenList interface removes a given token from the list and returnsfalse.toggle()方法从列表中删除给定的标记并返回false。 If token doesn't exist it's added and the function returnstrue.true。
You do not need to use add() and remove() , simply toggle() should do the trick.您不需要使用add()和remove() ，只需toggle()就可以了。
Also, as this keyword refers to the currently clicked element, I think you do not need to get the element by id here:另外，由于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
You don't need this two instructions:你不需要这两条指令：
monday.classList.add("redColor");
monday.classList.remove("redColor");
Just the toggle is enough.只要拨动就够了。 Also if you already captured the div in the variable monday , you don't need the reference to this :此外，如果您已经在变量monday中捕获了 div，则不需要对this的引用：
function toggleClass() {
var monday = document.getElementById("monday");
monday.classList.toggle("redColor");
}
monday.addEventListener("click", toggleClass)
this should do the trick.这应该可以解决问题。
Here's a pen to illustrate: https://codepen.io/ePresas/pen/BaQjVwG这里有一支笔来说明： https://codepen.io/ePresas/pen/BaQjVwG
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.