为什么 jQuery 函数 toggleClass() 不起作用？
[英]Why doesn't jQuery function toggleClass() work?
问题描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery/jquery.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
background: green;
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
if ($("#btn").hasClass("green")) {
$("#btn").css("backgroundColor", "red");
}
else if ($("#btn").hasClass("red")) {
$("#btn").css("backgroundColor", "green");
}
});
});
</script>
<button id="btn">Button</button>
</body>
</html>
I want the button to change its color either to red if it's green or to green if it's red.
我希望按钮将其颜色更改为红色（如果它是绿色的）或绿色（如果它是红色的）。 So I use toggleClass() to implement that.所以我使用 toggleClass() 来实现它。
Question: why doesn't it work?问题：为什么它不起作用？
3 个解决方案
解决方案1
4 2020-10-31 14:05:07
It is almost certainly working but there are no CSS rules for the class "background" in the code you posted.它几乎可以肯定是有效的，但是您发布的代码中没有针对“背景”类的 CSS 规则。 The function is for adding/removing an entry from the class list of an element, not for directly manipulating style object properties.该函数用于从元素的类列表中添加/删除条目，而不是直接操作样式对象属性。
If you do switch from .toggleClass() to .css() , you'll find that switching a property from one value to another immediately will have no visible effect.如果您确实从.toggleClass()切换到.css() ，您会发现立即将一个属性从一个值切换到另一个值不会有明显的效果。 The browser will effectively ignore the first update.浏览器将有效地忽略第一次更新。
解决方案2
3 2020-10-31 14:06:55
Your are change class name using toggle not the rule within the class.您是使用切换而不是类中的规则来更改类名。 But you can iverride it by adding inline style, like:但是您可以通过添加内联样式来实现它，例如：
$("#btn").css("background", "red");
$(() => { $("#btn").click(function () { const bgColor = this.style.backgroundColor; $(this).css("backgroundColor", bgColor === 'green' ? "red" : "green"); }); });
#btn { color: #fff; padding: 15px; font-size: 24px; font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn" style="background-color:green;">Button</button>
解决方案3
0 2020-10-31 15:45:41
It is perfectly correct to use the .toggleClass() method...使用.toggleClass()方法是完全正确的......
But the argument is a string of space separated classnames.但参数是一串空格分隔的类名。
And, of course, you have to define those class rules in your style sheet.而且，当然，您必须在样式表中定义这些类规则。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--script src="../jquery/jquery.js"></script--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css" rel="stylesheet"> #btn { /*background: green;*/ color: #fff; padding: 15px; font-size: 24px; font-weight: bold; } .red{ background-color: red; } .green{ background-color: green; } </style> </head> <body> <script> $(() => { $("#btn").click(() => { $("#btn").toggleClass("red green"); }); }); </script> <button id="btn" class="green">Button</button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.