我有一个红色按钮，我想在单击时将其更改为带有红色轮廓的白色按钮，然后在再次单击时恢复为全红色。单击时我无法更改它。它只是保持红色。
我希望能够使用 jquery 函数“toggleClass()”将类应用于具有自定义(背景颜色)属性的按钮。它使用“.buttonF”CSS 属性，但不会应用“.off”CSS 属性，因为看起来类没有被“toggleClass()”打开
按钮切换页面上显示的文本，但这与我的问题无关。
这是我的 HTML 页面:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="ryft1.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<head></head>
<script>
function toggleF(button){
$(this).toggleClass("off"); <!-- Toggle background color by changing class-->
var f = document.getElementsByClassName("key");
var i;
if(document.getElementById("1").name=="OFF"){
document.getElementById("1").name="ON";
for(i=0; i<f.length; i++){
f[i].style.display="block";
}
}
else if(document.getElementById("1").name=="ON"){
document.getElementById("1").name="OFF";
for(i=0; i<f.length; i++){
f[i].style.display="none";
}
}
}
</script>
<body>
<form action="">
<input type="button" class="buttonF" id="1" value="F"
onclick="toggleF(this);" name="ON">
<p class="key">Sample text</p>
</body>
</html>
这是我的 CSS 页面:
.buttonF {
background-color: #ff0000;
padding: 13px 15px;
text-align:center;
font-size: 12px;
border-radius: 50%;
border: 2px solid #ff0000;
}
.off{
background-color: #ffffff
}
最佳答案
您需要在函数中选择按钮。 this 不是指向元素，而是指向 window 对象。您元素的 this 是函数的参数。
改变这一行:
$(this).toggleClass("off");
对此:
$(button).toggleClass("off");
关于javascript - 在输入按钮上使用 toggleClass() 更改 CSS 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38709047/