在输入按钮上使用 toggleClass() 更改 CSS 属性答案

【问题标题】：Changing CSS attribute using toggleClass() on an input button在输入按钮上使用 toggleClass() 更改 CSS 属性
【发布时间】：2016-08-01 22:26:28
【问题描述】：

我有一个红色按钮，我想将其更改为单击时带有红色轮廓的白色按钮，然后再次单击时变回全红色。单击时我无法更改它。它只是保持红色。

我希望能够使用 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
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您需要选择函数中的按钮。 this 不是指向元素，而是指向窗口对象。您元素的 this 是您的函数的参数。

改变这一行：

$(this).toggleClass("off");

到这里：

$(button).toggleClass("off");

【讨论】：

在这一点上，我的逻辑还有一个问题。在将按钮“打开”的第一个 if 语句中，我希望它仅打开仅具有指定类的对象，而不是具有指定类和其他类的对象。现在，如果对象 1 具有 A 类，对象 2 具有 A 类和 B 类，则切换 A 的按钮将打开和关闭 1 和 2。我希望它关闭2，但不打开。有什么建议吗？